@pylerai/design-system 2.4.0 → 2.5.0

package/dist/components/ui/video-player.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+/** 컨트롤 접근성 라벨 — 기본은 한국어. en·ja 화면에서는 소비 앱이 번역을 넘긴다. */
+export interface VideoPlayerLabels {
+    play: string;
+    pause: string;
+    seek: string;
+    volume: string;
+    mute: string;
+    unmute: string;
+    enterFullscreen: string;
+    exitFullscreen: string;
+}
+export interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "controls" | "className"> {
+    /** 바깥 컨테이너 클래스 — 크기·비율은 여기서 정한다 (기본 16:9, 너비 100%). */
+    className?: string;
+    /** `<video>` 요소 클래스 (기본 `object-contain`) */
+    videoClassName?: string;
+    /** 마지막 조작 후 컨트롤을 숨기기까지의 시간(ms). 일시정지 중에는 항상 보인다. 기본 2500 */
+    hideControlsAfter?: number;
+    /** 컨트롤 aria-label 덮어쓰기 (일부만 넘겨도 된다) */
+    labels?: Partial<VideoPlayerLabels>;
+}
+/**
+ * Figma Player Controller. 영상 위에 마우스를 올리거나 터치하면 dim(검정 50%)과 함께
+ * 가운데 재생/일시정지, 하단 현재 시간 · 시크바 · 전체 길이 · 볼륨(세로 슬라이더) · 전체화면 버튼이 뜬다.
+ * ref 는 내부 `<video>` 요소를 가리킨다 — 외부(예: Timeline `onSeek`)에서 `currentTime` 을 바꿀 때 쓴다.
+ */
+declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<HTMLVideoElement>>;
+export { VideoPlayer };

package/dist/components/ui/video-player.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { MediaSlider as C } from "./media-slider.js";
+import { formatTime as g } from "../../lib/format-time.js";
+import { PauseIcon as _, PlayArrowIcon as G, VolumeUpIcon as J, VolumeOffIcon as K, FullscreenExitIcon as Q, FullscreenIcon as W } from "../../lib/icons.js";
+import { cn as l } from "../../lib/utils.js";
+import * as n from "react";
+const X = {
+  play: "재생",
+  pause: "일시정지",
+  seek: "재생 위치",
+  volume: "볼륨",
+  mute: "음소거",
+  unmute: "음소거 해제",
+  enterFullscreen: "전체화면",
+  exitFullscreen: "전체화면 종료"
+}, Y = n.forwardRef(
+  ({ className: L, videoClassName: S, hideControlsAfter: I = 2500, labels: R, muted: u, ...j }, V) => {
+    const o = { ...X, ...R }, d = n.useRef(null), i = n.useRef(null);
+    n.useImperativeHandle(V, () => i.current);
+    const [m, M] = n.useState(!1), [v, x] = n.useState(0), [r, P] = n.useState(0), [N, A] = n.useState(1), [k, D] = n.useState(!!u), [w, q] = n.useState(!1), [B, p] = n.useState(!1), f = n.useRef();
+    n.useEffect(() => {
+      const e = i.current;
+      if (!e) return;
+      const s = () => {
+        M(!e.paused && !e.ended), x(e.currentTime), P(Number.isFinite(e.duration) ? e.duration : 0), A(e.volume), D(e.muted);
+      }, z = ["play", "pause", "ended", "timeupdate", "durationchange", "loadedmetadata", "volumechange", "seeked"];
+      return z.forEach((y) => e.addEventListener(y, s)), s(), () => z.forEach((y) => e.removeEventListener(y, s));
+    }, []), n.useEffect(() => {
+      i.current && u !== void 0 && (i.current.muted = u);
+    }, [u]), n.useEffect(() => {
+      const e = () => q(document.fullscreenElement === d.current);
+      return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+    }, []), n.useEffect(() => () => clearTimeout(f.current), []);
+    const a = () => {
+      p(!0), clearTimeout(f.current), f.current = setTimeout(() => p(!1), I);
+    }, E = () => {
+      const e = i.current;
+      e && (e.paused || e.ended ? e.play()?.catch(() => {
+      }) : e.pause(), a());
+    }, U = (e) => {
+      const s = i.current;
+      !s || !r || (s.currentTime = e * r, x(s.currentTime), a());
+    }, $ = (e) => {
+      const s = i.current;
+      s && (s.volume = e, s.muted = e === 0, a());
+    }, H = () => {
+      const e = i.current;
+      e && (e.muted = !e.muted, !e.muted && e.volume === 0 && (e.volume = 1), a());
+    }, O = () => {
+      const e = d.current;
+      e && (document.fullscreenElement === e ? document.exitFullscreen().catch(() => {
+      }) : e.requestFullscreen ? e.requestFullscreen().catch(() => {
+      }) : i.current?.webkitEnterFullscreen?.(), a());
+    }, F = !m || B, T = r ? g(r) : "--:--", h = !k && N > 0, b = "inline-flex shrink-0 items-center justify-center text-ds-primitive-white outline-none focus-visible:ring-2 focus-visible:ring-ds-primitive-white rounded-full";
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: d,
+        className: l("group/player relative aspect-video w-full overflow-hidden rounded-ds-lg bg-ds-primitive-black", L),
+        onPointerMove: a,
+        onPointerDown: a,
+        onPointerLeave: (e) => e.pointerType === "mouse" && p(!1),
+        onFocus: a,
+        children: [
+          /* @__PURE__ */ t(
+            "video",
+            {
+              ref: i,
+              playsInline: !0,
+              muted: u,
+              className: l("size-full object-contain", S),
+              ...j
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              "data-state": F ? "visible" : "hidden",
+              className: l(
+                "absolute inset-0 transition-opacity duration-200",
+                F ? "opacity-100" : (
+                  // 키보드 포커스가 컨트롤 안에 있으면 숨기지 않는다 (WCAG 2.4.7 — 포커스 링이 사라지면 안 됨)
+                  "pointer-events-none opacity-0 has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:opacity-100"
+                )
+              ),
+              children: [
+                /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "absolute inset-0 bg-ds-primitive-black opacity-50", onClick: E }),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": m ? o.pause : o.play,
+                    onClick: E,
+                    className: l(b, "absolute left-1/2 top-1/2 size-[60px] -translate-x-1/2 -translate-y-1/2"),
+                    children: m ? /* @__PURE__ */ t(_, { className: "size-[60px]" }) : /* @__PURE__ */ t(G, { className: "size-[60px]" })
+                  }
+                ),
+                /* @__PURE__ */ c("div", { className: "absolute inset-x-0 bottom-0 flex h-6 items-center gap-4 pb-3 pl-4 pr-5 box-content", children: [
+                  /* @__PURE__ */ t("span", { className: "shrink-0 text-body-3-r tabular-nums text-ds-primitive-white", children: g(v) }),
+                  /* @__PURE__ */ t(
+                    C,
+                    {
+                      "aria-label": o.seek,
+                      "aria-valuetext": `${g(v)} / ${T}`,
+                      value: r ? v / r : 0,
+                      onChange: U,
+                      showThumb: !0,
+                      step: r ? Math.min(1, 5 / r) : 0.05,
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "shrink-0 text-body-3-r tabular-nums text-ds-primitive-white", children: T }),
+                  /* @__PURE__ */ c("div", { className: "flex shrink-0 items-center gap-2", children: [
+                    /* @__PURE__ */ c("div", { className: "group/volume relative flex w-8 justify-center", children: [
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: l(
+                            "absolute bottom-full pb-1.5",
+                            "pointer-events-none opacity-0 transition-opacity",
+                            "group-hover/volume:pointer-events-auto group-hover/volume:opacity-100",
+                            "group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100"
+                          ),
+                          children: /* @__PURE__ */ c("div", { className: "relative flex h-[103px] w-8 justify-center pb-[11px] pt-3", children: [
+                            /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "absolute inset-0 rounded-full bg-ds-primitive-black opacity-50" }),
+                            /* @__PURE__ */ t(
+                              C,
+                              {
+                                "aria-label": o.volume,
+                                orientation: "vertical",
+                                value: k ? 0 : N,
+                                onChange: $,
+                                className: l(!h && "opacity-50")
+                              }
+                            )
+                          ] })
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": h ? o.mute : o.unmute,
+                          onClick: H,
+                          className: l(b, "size-6"),
+                          children: h ? /* @__PURE__ */ t(J, { className: "size-6" }) : /* @__PURE__ */ t(K, { className: "size-6" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": w ? o.exitFullscreen : o.enterFullscreen,
+                        onClick: O,
+                        className: l(b, "size-6"),
+                        children: w ? /* @__PURE__ */ t(Q, { className: "size-6" }) : /* @__PURE__ */ t(W, { className: "size-6" })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Y.displayName = "VideoPlayer";
+export {
+  Y as VideoPlayer
+};

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } fro
 export { Pagination } from './components/ui/pagination';
 export type { PaginationProps } from './components/ui/pagination';
 export { Badge } from './components/ui/badge';
-export type { BadgeProps, BadgeColor, BadgeSize } from './components/ui/badge';
+export type { BadgeProps, BadgeColor, BadgeSize, BadgeVariant } from './components/ui/badge';
 export { Tag } from './components/ui/tag';
 export type { TagProps, TagSize } from './components/ui/tag';
 export { Chip } from './components/ui/chip';
@@ -48,3 +48,9 @@ export { Label, labelVariants } from './components/ui/label';
 export type { LabelProps } from './components/ui/label';
 export { Calendar } from './components/ui/calendar';
 export type { CalendarProps, DateRange } from './components/ui/calendar';
+export { ProgressBar } from './components/ui/progress-bar';
+export type { ProgressBarProps, ProgressBarVariant, ProgressBarSize } from './components/ui/progress-bar';
+export { VideoPlayer } from './components/ui/video-player';
+export type { VideoPlayerProps, VideoPlayerLabels } from './components/ui/video-player';
+export { Timeline } from './components/ui/timeline';
+export type { TimelineProps, TimelineTrack, TimelineHeatmapTrack, TimelineLineTrack, TimelineEventsTrack, } from './components/ui/timeline';

package/dist/index.js

@@ -1,16 +1,16 @@
 "use client";
 /* empty css          */
-import { PYLER_LIGHT_COLOR_TOKENS as t, PYLER_LIGHT_GROUP_ORDER as a, flatPylerLightTokens as l, formatPylerPathForDisplay as p, getDsCssVar as n, getPylerCssVar as f } from "./tokens/pyler-light.js";
+import { PYLER_LIGHT_COLOR_TOKENS as t, PYLER_LIGHT_GROUP_ORDER as a, flatPylerLightTokens as l, formatPylerPathForDisplay as p, getDsCssVar as m, getPylerCssVar as f } from "./tokens/pyler-light.js";
 import { PYLER_TYPOGRAPHY_STYLE as x } from "./tokens/typography.js";
-import { DS_RADIUS as T, DS_SHADOW as d } from "./tokens/shadow-radius.js";
-import { Button as b, ButtonIndicator as P, buttonVariants as R } from "./components/ui/button.js";
+import { DS_RADIUS as s, DS_SHADOW as T } from "./tokens/shadow-radius.js";
+import { Button as b, ButtonIndicator as P, buttonVariants as g } from "./components/ui/button.js";
 import { InputField as C, TextField as L } from "./components/ui/input.js";
-import { SearchField as D } from "./components/ui/search-field.js";
-import { Dropdown as c } from "./components/ui/dropdown.js";
-import { Checkbox as H } from "./components/ui/checkbox.js";
-import { Radio as h } from "./components/ui/radio.js";
-import { Toggle as B } from "./components/ui/toggle.js";
-import { Table as I, TableBody as V, TableCell as Y, TableHead as M, TableHeaderCell as k, TableRoot as A, TableRow as F } from "./components/ui/table.js";
+import { SearchField as y } from "./components/ui/search-field.js";
+import { Dropdown as S } from "./components/ui/dropdown.js";
+import { Checkbox as B } from "./components/ui/checkbox.js";
+import { Radio as O } from "./components/ui/radio.js";
+import { Toggle as h } from "./components/ui/toggle.js";
+import { Table as E, TableBody as I, TableCell as Y, TableHead as M, TableHeaderCell as k, TableRoot as A, TableRow as F } from "./components/ui/table.js";
 import { LoadingBar as w } from "./components/ui/loading-bar.js";
 import { Tabs as v, TabsContent as K, TabsList as N, TabsTrigger as W } from "./components/ui/tabs.js";
 import { Pagination as q } from "./components/ui/pagination.js";
@@ -19,40 +19,44 @@ import { Tag as X } from "./components/ui/tag.js";
 import { Chip as $ } from "./components/ui/chip.js";
 import { SnackbarContent as ro, Toaster as eo, snackbar as to, toast as ao } from "./components/ui/toast.js";
 import { Tips as po } from "./components/ui/tips.js";
-import { ActionModal as fo, ContentModal as mo, InformationModal as xo } from "./components/ui/modal.js";
-import { ModalProvider as To, useModal as so } from "./components/ui/use-modal.js";
-import { Headline as Po, headlineVariants as Ro } from "./components/ui/headline.js";
+import { ActionModal as fo, ContentModal as no, InformationModal as xo } from "./components/ui/modal.js";
+import { ModalProvider as so, useModal as To } from "./components/ui/use-modal.js";
+import { Headline as Po, headlineVariants as go } from "./components/ui/headline.js";
 import { Body as Co, bodyVariants as Lo } from "./components/ui/body.js";
-import { Label as Do, labelVariants as So } from "./components/ui/label.js";
-import { Calendar as yo } from "./components/ui/calendar.js";
+import { Label as yo, labelVariants as Do } from "./components/ui/label.js";
+import { Calendar as co } from "./components/ui/calendar.js";
+import { ProgressBar as Ho } from "./components/ui/progress-bar.js";
+import { VideoPlayer as Vo } from "./components/ui/video-player.js";
+import { Timeline as uo } from "./components/ui/timeline.js";
 export {
   fo as ActionModal,
   J as Badge,
   Co as Body,
   b as Button,
   P as ButtonIndicator,
-  yo as Calendar,
-  H as Checkbox,
+  co as Calendar,
+  B as Checkbox,
   $ as Chip,
-  mo as ContentModal,
-  T as DS_RADIUS,
-  d as DS_SHADOW,
-  c as Dropdown,
+  no as ContentModal,
+  s as DS_RADIUS,
+  T as DS_SHADOW,
+  S as Dropdown,
   Po as Headline,
   xo as InformationModal,
   C as InputField,
-  Do as Label,
+  yo as Label,
   w as LoadingBar,
-  To as ModalProvider,
+  so as ModalProvider,
   t as PYLER_LIGHT_COLOR_TOKENS,
   a as PYLER_LIGHT_GROUP_ORDER,
   x as PYLER_TYPOGRAPHY_STYLE,
   q as Pagination,
-  h as Radio,
-  D as SearchField,
+  Ho as ProgressBar,
+  O as Radio,
+  y as SearchField,
   ro as SnackbarContent,
-  I as Table,
-  V as TableBody,
+  E as Table,
+  I as TableBody,
   Y as TableCell,
   M as TableHead,
   k as TableHeaderCell,
@@ -64,18 +68,20 @@ export {
   W as TabsTrigger,
   X as Tag,
   L as TextField,
+  uo as Timeline,
   po as Tips,
   eo as Toaster,
-  B as Toggle,
+  h as Toggle,
+  Vo as VideoPlayer,
   Lo as bodyVariants,
-  R as buttonVariants,
+  g as buttonVariants,
   l as flatPylerLightTokens,
   p as formatPylerPathForDisplay,
-  n as getDsCssVar,
+  m as getDsCssVar,
   f as getPylerCssVar,
-  Ro as headlineVariants,
-  So as labelVariants,
+  go as headlineVariants,
+  Do as labelVariants,
   to as snackbar,
   ao as toast,
-  so as useModal
+  To as useModal
 };

package/dist/lib/field-box.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SearchField · InputField 입력 상자 공통 스타일 (Figma 2026-11).
+ *
+ * - 배경: disabled·readOnly = surface.strong / error = 흰 바탕 / 평소 = surface.normal, focus 때 흰 바탕
+ * - 테두리: error = 빨강(disabled·readOnly 여도 유지 — 에러를 숨기지 않는다) / disabled = 없음 /
+ *   그 외(readOnly 포함) = 투명, focus 때 파랑. readOnly 도 Tab 으로 포커스되므로 표시가 있어야 한다
+ * - 테두리 자리는 늘 1px 투명으로 남겨 focus 때 크기가 변하지 않는다. hover 는 바꾸지 않는다
+ */
+export declare function fieldBoxClasses({ disabled, readOnly, error, }: {
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+}): string;

package/dist/lib/field-box.js

@@ -0,0 +1,11 @@
+"use client";
+function d({
+  disabled: r,
+  readOnly: n,
+  error: e
+}) {
+  return `${r || n ? "bg-ds-surface-strong" : e ? "bg-ds-background-default" : "bg-ds-surface-normal focus-within:bg-ds-background-default"} ${e ? "border-ds-primary-red-normal" : r ? "border-transparent" : "border-transparent focus-within:border-ds-primary-blue-normal"}`;
+}
+export {
+  d as fieldBoxClasses
+};

package/dist/lib/format-time.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 초 → `mm:ss` (1시간 이상이면 `h:mm:ss`). 음수·NaN 은 0 으로 본다.
+ * VideoPlayer 현재 시간 · Timeline 눈금이 같은 표기를 쓰도록 공유한다.
+ */
+export declare function formatTime(seconds: number): string;

package/dist/lib/format-time.js

@@ -0,0 +1,8 @@
+"use client";
+function c(t) {
+  const o = Number.isFinite(t) && t > 0 ? Math.floor(t) : 0, r = Math.floor(o / 3600), i = Math.floor(o % 3600 / 60), s = o % 60, n = String(i).padStart(2, "0"), a = String(s).padStart(2, "0");
+  return r > 0 ? `${r}:${n}:${a}` : `${n}:${a}`;
+}
+export {
+  c as formatTime
+};

package/dist/lib/icons.d.ts

@@ -45,4 +45,10 @@ export declare function GoogleAdsIcon({ className }: IconProps): import("react/j
 export declare function DV360Icon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function MetaIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function TikTokIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlayArrowIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function PauseIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VolumeUpIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VolumeOffIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FullscreenIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FullscreenExitIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};