@pylerai/design-system 2.4.0 → 2.5.0

package/dist/components/ui/input.js

@@ -1,6 +1,7 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { EyeOnIcon as E, EyeOffIcon as P } from "../../lib/icons.js";
+import { fieldBoxClasses as V } from "../../lib/field-box.js";
 import { cn as d } from "../../lib/utils.js";
 import * as o from "react";
 const I = {
@@ -16,11 +17,11 @@ const I = {
     container: "h-8 px-3 py-1.5 gap-1.5",
     text: "text-body-3-r"
   }
-}, V = o.forwardRef(
+}, $ = o.forwardRef(
   ({
     label: r,
     showLabel: c = !0,
-    require: l,
+    require: i,
     message: n,
     hint: s,
     error: t,
@@ -28,47 +29,46 @@ const I = {
     size: a = "lg",
     wrapperClassName: F,
     className: j,
-    disabled: b,
-    readOnly: f,
+    disabled: f,
+    readOnly: b,
     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(
+  }, R) => {
+    const [m, k] = o.useState(!1), y = u === "password", B = y ? m ? "text" : "password" : u, p = o.useId(), g = h.id ?? p, N = `${p}-message`, v = `${p}-description`, C = [n ? N : null, t || s ? v : null].filter(Boolean).join(" ") || void 0, w = x ?? (y ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: () => R((C) => !C),
+        onClick: () => k((T) => !T),
         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: 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: "*" })
+    return /* @__PURE__ */ l("div", { className: d("flex flex-col gap-2", F), children: [
+      c && r && /* @__PURE__ */ l("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ e("label", { htmlFor: g, className: "text-body-2-r text-ds-text-strong", children: r }),
+        i && /* @__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(
+      /* @__PURE__ */ l(
         "div",
         {
           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",
+            "flex items-center overflow-hidden border rounded-ds-md transition-colors",
+            V({ disabled: f, readOnly: b, error: !!t }),
             I[a].container
           ),
           children: [
             /* @__PURE__ */ e(
               "input",
               {
-                ref: k,
-                id: y,
-                type: T,
+                ref: R,
+                id: g,
+                type: B,
                 "aria-invalid": t ? !0 : void 0,
-                "aria-describedby": B,
-                "aria-required": l || void 0,
+                "aria-describedby": C,
+                "aria-required": i || void 0,
                 className: d(
                   "flex-1 min-w-0 bg-transparent outline-none font-sans",
                   "text-ds-text-strong placeholder:text-ds-text-normal",
@@ -76,8 +76,8 @@ const I = {
                   I[a].text,
                   j
                 ),
-                disabled: b,
-                readOnly: f,
+                disabled: f,
+                readOnly: b,
                 ...h
               }
             ),
@@ -99,11 +99,11 @@ const I = {
     ] });
   }
 );
-V.displayName = "InputField";
-const $ = o.forwardRef(
-  ({ label: r, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
+$.displayName = "InputField";
+const z = o.forwardRef(
+  ({ label: r, showLabel: c = !0, wrapperClassName: i, className: n, ...s }, t) => {
     const x = o.useId(), a = s.id ?? x;
-    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", l), children: [
+    return /* @__PURE__ */ l("div", { className: d("flex flex-col gap-2", i), 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",
@@ -122,8 +122,8 @@ const $ = o.forwardRef(
     ] });
   }
 );
-$.displayName = "TextField";
+z.displayName = "TextField";
 export {
-  V as InputField,
-  $ as TextField
+  $ as InputField,
+  z as TextField
 };

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const labelVariants: (props?: ({
-    variant?: "label-1-r" | null | undefined;
+    variant?: "label-1-r" | "label-1-sb" | null | undefined;
     as?: "p" | "span" | "label" | "div" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface LabelProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof labelVariants> {

package/dist/components/ui/label.js

@@ -2,14 +2,15 @@
 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(
+import { cva as b } from "class-variance-authority";
+import * as p from "react";
+const c = b(
   "text-foreground leading-tight",
   {
     variants: {
       variant: {
-        "label-1-r": "text-label-1-r"
+        "label-1-r": "text-label-1-r",
+        "label-1-sb": "text-label-1-sb"
       },
       as: {
         label: "",
@@ -23,15 +24,15 @@ const c = p(
       as: "label"
     }
   }
-), f = b.forwardRef(
-  ({ className: t, variant: r, as: e, asChild: o, ...l }, n) => {
-    const a = e || "label";
+), f = p.forwardRef(
+  ({ className: t, variant: e, as: l, asChild: r, ...o }, n) => {
+    const a = l || "label";
     return /* @__PURE__ */ s(
-      o ? m : a,
+      r ? m : a,
       {
-        className: i(c({ variant: r, as: a, className: t })),
+        className: i(c({ variant: e, as: a, className: t })),
         ref: n,
-        ...l
+        ...o
       }
     );
   }

package/dist/components/ui/media-slider.d.ts

@@ -0,0 +1,20 @@
+/**
+ * VideoPlayer 내부용 슬라이더 (시크바 · 볼륨). 공개 API 아님 — index.tsx 에서 export 하지 않는다.
+ * 네이티브 range 는 트랙·썸 스타일을 브라우저별 pseudo-element 로 따로 맞춰야 해서
+ * div + pointer capture 로 구현하고 `role="slider"` 와 키보드(←→↑↓·Home·End)를 붙였다.
+ */
+export interface MediaSliderProps {
+    /** 0~1 */
+    value: number;
+    onChange: (value: number) => void;
+    orientation?: "horizontal" | "vertical";
+    /** 16px 원형 손잡이 표시 (시크바) */
+    showThumb?: boolean;
+    /** 키보드 한 번에 움직이는 양 (0~1). 기본 0.05 */
+    step?: number;
+    "aria-label": string;
+    "aria-valuetext"?: string;
+    className?: string;
+}
+declare function MediaSlider({ value, onChange, orientation, showThumb, step, className, ...aria }: MediaSliderProps): import("react/jsx-runtime").JSX.Element;
+export { MediaSlider };

package/dist/components/ui/media-slider.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs as h, jsx as u } from "react/jsx-runtime";
+import { cn as o, clamp as l } from "../../lib/utils.js";
+import * as x from "react";
+function N({
+  value: c,
+  onChange: a,
+  orientation: d = "horizontal",
+  showThumb: v = !1,
+  step: i = 0.05,
+  className: w,
+  ...p
+}) {
+  const f = x.useRef(null), n = d === "vertical", r = l(Number.isFinite(c) ? c : 0, 0, 1), m = (e) => {
+    const t = f.current?.getBoundingClientRect();
+    return t ? n ? l((t.bottom - e.clientY) / t.height, 0, 1) : l((e.clientX - t.left) / t.width, 0, 1) : r;
+  }, b = (e) => {
+    a(m(e));
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }, y = (e) => {
+    e.currentTarget.hasPointerCapture?.(e.pointerId) && a(m(e));
+  }, g = (e) => {
+    const t = {
+      ArrowRight: r + i,
+      ArrowUp: r + i,
+      ArrowLeft: r - i,
+      ArrowDown: r - i,
+      Home: 0,
+      End: 1
+    };
+    e.key in t && (e.preventDefault(), a(l(t[e.key], 0, 1)));
+  }, s = `${r * 100}%`;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-orientation": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(r * 100),
+      ...p,
+      onPointerDown: b,
+      onPointerMove: y,
+      onKeyDown: g,
+      className: o(
+        // 4px 트랙이지만 손가락·마우스 히트 영역은 16px 로 넓힌다
+        "relative flex cursor-pointer touch-none items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-ds-primitive-white",
+        n ? "h-full w-4 flex-col" : "h-4 w-full",
+        w
+      ),
+      children: [
+        /* @__PURE__ */ h(
+          "div",
+          {
+            ref: f,
+            className: o("relative rounded-full", n ? "h-full w-1" : "h-1 w-full"),
+            children: [
+              /* @__PURE__ */ u("div", { className: o("absolute inset-0 rounded-full bg-ds-primitive-white", !n && "opacity-50") }),
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: o(
+                    "absolute rounded-full bg-ds-primary-blue-normal",
+                    n ? "inset-x-0 bottom-0" : "inset-y-0 left-0"
+                  ),
+                  style: n ? { height: s } : { width: s }
+                }
+              )
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ u(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "pointer-events-none absolute size-4 -translate-x-1/2 rounded-full bg-ds-primary-blue-normal",
+            style: { left: s }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  N as MediaSlider
+};

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

@@ -0,0 +1,21 @@
+import { DsSize } from '../../lib/size';
+import * as React from "react";
+export type ProgressBarVariant = "normal" | "large";
+export type ProgressBarSize = Extract<DsSize, "md" | "sm">;
+/**
+ * `role="progressbar"` 라 접근 이름이 필요하다 — `aria-label` 또는 `aria-labelledby` 를 반드시 넘긴다
+ * (없으면 axe `aria-progressbar-name` 위반).
+ */
+export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 진행률 0~100. 범위 밖 값은 잘린다. */
+    value: number;
+    /**
+     * - `normal`: 검은 테두리 캡슐 + 안쪽 파란 막대 (Figma Bar/Normal)
+     * - `large`: 16px 각진 막대, 테두리 없음 (Figma Bar/Large)
+     */
+    variant?: ProgressBarVariant;
+    /** `normal` 전용 높이 — md 10px · sm 8px. `large` 는 무시한다. */
+    size?: ProgressBarSize;
+}
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ProgressBar };

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { cn as r, clamp as c } from "../../lib/utils.js";
+import * as u from "react";
+const s = {
+  md: { track: "h-[10px]", fill: "min-w-[6px]" },
+  sm: { track: "h-[8px]", fill: "min-w-[4px]" }
+}, p = u.forwardRef(
+  ({ value: a, variant: n = "normal", size: e = "md", className: d, ...t }, m) => {
+    const l = c(Number.isFinite(a) ? a : 0, 0, 100), i = n === "large";
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: m,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(l),
+        className: r(
+          "w-full overflow-hidden",
+          i ? "h-4 bg-ds-surface-normal" : r(
+            "rounded-full border border-ds-primitive-black bg-ds-background-default p-px",
+            s[e].track
+          ),
+          d
+        ),
+        ...t,
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            className: r(
+              "h-full bg-ds-primary-blue-normal transition-[width] duration-200",
+              !i && r("rounded-full", s[e].fill)
+            ),
+            style: { width: `${l}%` }
+          }
+        )
+      }
+    );
+  }
+);
+p.displayName = "ProgressBar";
+export {
+  p as ProgressBar
+};

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

@@ -1,9 +1,10 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { SearchIcon as v, CloseIcon as w } from "../../lib/icons.js";
-import { cn as r } from "../../lib/utils.js";
-import * as b from "react";
-const f = {
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { SearchIcon as w, CloseIcon as C } from "../../lib/icons.js";
+import { fieldBoxClasses as j } from "../../lib/field-box.js";
+import { cn as s } from "../../lib/utils.js";
+import * as h from "react";
+const b = {
   lg: {
     container: "h-11 px-3 gap-1.5",
     text: "text-body-2-r"
@@ -16,77 +17,78 @@ const f = {
     container: "h-8 px-3 gap-1.5",
     text: "text-body-3-r"
   }
-}, k = b.forwardRef(
+}, k = h.forwardRef(
   ({
-    label: d,
-    showLabel: h = !0,
-    showIcon: u = !0,
-    size: a = "lg",
-    error: e,
-    hint: s,
-    onClear: o,
-    wrapperClassName: g,
+    label: r,
+    showLabel: u = !0,
+    showIcon: g = !0,
+    size: d = "lg",
+    error: t,
+    hint: n,
+    onClear: i,
+    wrapperClassName: N,
     className: y,
-    disabled: n,
-    value: i,
+    disabled: o,
+    readOnly: a,
+    value: c,
     ...l
-  }, N) => {
-    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 && d && /* @__PURE__ */ t("label", { htmlFor: m, className: "text-body-2-r text-ds-text-strong", children: d }),
-      /* @__PURE__ */ p(
+  }, I) => {
+    const v = !o && !a && !!i && !!c, x = h.useId(), m = l.id ?? x, p = `${x}-description`;
+    return /* @__PURE__ */ f("div", { className: s("flex flex-col gap-2", N), children: [
+      u && r && /* @__PURE__ */ e("label", { htmlFor: m, className: "text-body-2-r text-ds-text-strong", children: r }),
+      /* @__PURE__ */ f(
         "div",
         {
-          className: r(
-            "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[a].container
+          className: s(
+            "flex items-center overflow-hidden border rounded-ds-md transition-colors",
+            j({ disabled: o, readOnly: a, error: !!t }),
+            b[d].container
           ),
           children: [
-            u && /* @__PURE__ */ t(v, { className: "shrink-0 text-ds-text-normal" }),
-            /* @__PURE__ */ t(
+            g && /* @__PURE__ */ e(w, { className: "shrink-0 text-ds-text-normal" }),
+            /* @__PURE__ */ e(
               "input",
               {
-                ref: N,
+                ref: I,
                 id: m,
-                value: i,
-                "aria-invalid": e ? !0 : void 0,
-                "aria-describedby": e || s ? x : void 0,
-                className: r(
+                value: c,
+                "aria-invalid": t ? !0 : void 0,
+                "aria-describedby": t || n ? p : void 0,
+                className: s(
                   "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[a].text,
+                  b[d].text,
                   y
                 ),
-                disabled: n,
+                disabled: o,
+                readOnly: a,
                 ...l
               }
             ),
-            I && /* @__PURE__ */ t(
+            v && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: o,
+                onClick: i,
                 "aria-label": "검색어 지우기",
                 className: "flex items-center justify-center",
                 tabIndex: -1,
-                children: /* @__PURE__ */ t(w, { className: "shrink-0 text-ds-text-normal" })
+                children: /* @__PURE__ */ e(C, { className: "shrink-0 text-ds-text-normal" })
               }
             )
           ]
         }
       ),
-      (e || s) && /* @__PURE__ */ t(
+      (t || n) && /* @__PURE__ */ e(
         "p",
         {
-          id: x,
-          className: r(
+          id: p,
+          className: s(
             "text-body-4-r",
-            e ? "text-ds-primary-red-normal" : "text-ds-text-normal"
+            t ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
-          children: e ?? s
+          children: t ?? n
         }
       )
     ] });