@pylerai/design-system 2.4.0 → 2.5.0

package/dist/components/ui/table.js

@@ -7,27 +7,27 @@ import { Checkbox as C } from "./checkbox.js";
 const S = {
   borderRight: "3px solid var(--ds-line-normal)"
 }, j = f.forwardRef(
-  ({ className: l, ...r }, n) => /* @__PURE__ */ a(
+  ({ className: i, ...r }, n) => /* @__PURE__ */ a(
     "div",
     {
       ref: n,
       role: "table",
-      className: g("w-full overflow-x-auto", l),
+      className: g("w-full overflow-x-auto", i),
       ...r
     }
   )
 );
 j.displayName = "TableRoot";
 const L = f.forwardRef(
-  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
+  (i, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...i })
 );
 L.displayName = "TableHead";
 const R = f.forwardRef(
-  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
+  (i, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...i })
 );
 R.displayName = "TableBody";
 const N = f.forwardRef(
-  ({ className: l, hoverable: r = !0, selected: n, ...i }, s) => /* @__PURE__ */ a(
+  ({ className: i, hoverable: r = !0, selected: n, ...l }, s) => /* @__PURE__ */ a(
     "div",
     {
       ref: s,
@@ -37,43 +37,43 @@ const N = f.forwardRef(
         "flex items-stretch w-full",
         r && "hover:bg-ds-surface-strong",
         n && "bg-ds-surface-normal",
-        l
+        i
       ),
-      ...i
+      ...l
     }
   )
 );
 N.displayName = "TableRow";
 const k = f.forwardRef(
   ({
-    className: l,
+    className: i,
     children: r,
     sortable: n,
-    sortDirection: i,
+    sortDirection: l,
     onSort: s,
     info: d,
     fixedLine: m,
     align: h = "left",
-    width: p,
-    style: b,
+    width: b,
+    style: p,
     ...y
   }, c) => {
-    const v = n && i != null;
+    const v = n && l != null;
     return /* @__PURE__ */ x(
       "div",
       {
         ref: c,
         role: "columnheader",
         tabIndex: n ? 0 : void 0,
-        "aria-sort": n ? i === "asc" ? "ascending" : i === "desc" ? "descending" : "none" : void 0,
+        "aria-sort": n ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
         className: g(
-          "flex h-10 items-center gap-1 border-t border-ds-line-normal bg-ds-surface-normal px-3 py-2.5",
-          p ? "shrink-0" : "flex-1 min-w-0",
+          "flex h-10 items-center gap-1 border-b border-ds-line-normal bg-ds-surface-alternative px-3 py-2.5",
+          b ? "shrink-0" : "flex-1 min-w-0",
           h === "right" && "justify-end",
           n && "cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
-          l
+          i
         ),
-        style: { width: p, ...m ? S : {}, ...b },
+        style: { width: b, ...m ? S : {}, ...p },
         onClick: n ? s : void 0,
         onKeyDown: n ? (u) => {
           (u.key === "Enter" || u.key === " ") && (u.preventDefault(), s?.());
@@ -88,7 +88,7 @@ const k = f.forwardRef(
               className: g(
                 "shrink-0 transition-transform duration-150",
                 v ? "text-ds-text-strong" : "text-ds-text-disabled",
-                i === "asc" && "rotate-180"
+                l === "asc" && "rotate-180"
               )
             }
           )
@@ -99,18 +99,18 @@ const k = f.forwardRef(
 );
 k.displayName = "TableHeaderCell";
 const T = f.forwardRef(
-  ({ className: l, align: r = "left", fixedLine: n, width: i, style: s, children: d, ...m }, h) => /* @__PURE__ */ a(
+  ({ className: i, align: r = "left", fixedLine: n, width: l, style: s, children: d, ...m }, h) => /* @__PURE__ */ a(
     "div",
     {
       ref: h,
       role: "cell",
       className: g(
         "flex items-center border-b border-ds-line-normal px-3 py-2",
-        i ? "shrink-0" : "flex-1 min-w-0",
+        l ? "shrink-0" : "flex-1 min-w-0",
         r === "right" && "justify-end",
-        l
+        i
       ),
-      style: { width: i, ...n ? S : {}, ...s },
+      style: { width: l, ...n ? S : {}, ...s },
       ...m,
       children: d
     }
@@ -118,21 +118,21 @@ const T = f.forwardRef(
 );
 T.displayName = "TableCell";
 function Y({
-  columns: l,
+  columns: i,
   data: r,
   sortKey: n,
-  sortDirection: i,
+  sortDirection: l,
   onSort: s,
   selectedRows: d,
   onRowSelect: m,
   onSelectAll: h,
-  getRowKey: p,
-  onRowClick: b,
+  getRowKey: b,
+  onRowClick: p,
   className: y
 }) {
   const c = d !== void 0, v = c && r.length > 0 && d.length === r.length, u = c && d.length > 0 && d.length < r.length, E = (e) => {
     if (!s) return;
-    s(e, n === e && i === "asc" ? "desc" : "asc");
+    s(e, n === e && l === "asc" ? "desc" : "asc");
   };
   return /* @__PURE__ */ x(j, { className: y, children: [
     /* @__PURE__ */ a(L, { children: /* @__PURE__ */ x(N, { hoverable: !1, children: [
@@ -145,11 +145,11 @@ function Y({
           onChange: (e) => h?.(e)
         }
       ) }),
-      l.map((e) => /* @__PURE__ */ a(
+      i.map((e) => /* @__PURE__ */ a(
         k,
         {
           sortable: e.sortable,
-          sortDirection: e.sortable && n === e.key ? i ?? null : null,
+          sortDirection: e.sortable && n === e.key ? l ?? null : null,
           onSort: () => E(e.key),
           info: e.info,
           fixedLine: e.fixedLine,
@@ -161,13 +161,13 @@ function Y({
       ))
     ] }) }),
     /* @__PURE__ */ a(R, { children: r.map((e, o) => {
-      const H = p ? p(e, o) : o, w = c && d.includes(o);
+      const H = b ? b(e, o) : o, w = c && d.includes(o);
       return /* @__PURE__ */ x(
         N,
         {
           selected: w,
-          onClick: b ? () => b(e, o) : void 0,
-          className: b ? "cursor-pointer" : void 0,
+          onClick: p ? () => p(e, o) : void 0,
+          className: p ? "cursor-pointer" : void 0,
           children: [
             c && /* @__PURE__ */ a(T, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ a(
               C,
@@ -178,7 +178,7 @@ function Y({
                 onClick: (t) => t.stopPropagation()
               }
             ) }),
-            l.map((t) => /* @__PURE__ */ a(
+            i.map((t) => /* @__PURE__ */ a(
               T,
               {
                 align: t.align,

package/dist/components/ui/tabs.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as h } from "react/jsx-runtime";
 import { cn as T } from "../../lib/utils.js";
-import * as o from "react";
-const $ = o.createContext(null);
+import * as s from "react";
+const $ = s.createContext(null);
 function C() {
-  const e = o.useContext($);
+  const e = s.useContext($);
   if (!e) throw new Error("TabsTrigger must be used within Tabs");
   return e;
 }
-const A = o.forwardRef(
+const A = s.forwardRef(
   ({
     value: e,
     defaultValue: t = "",
@@ -17,7 +17,7 @@ const A = o.forwardRef(
     children: f,
     className: b
   }, x) => {
-    const [u, p] = o.useState(t), g = e !== void 0, i = g ? e : u, m = o.useId(), [y, r] = o.useState(() => /* @__PURE__ */ new Set()), w = o.useCallback((c) => (r((a) => {
+    const [u, p] = s.useState(t), g = e !== void 0, i = g ? e : u, m = s.useId(), [w, r] = s.useState(() => /* @__PURE__ */ new Set()), y = s.useCallback((c) => (r((a) => {
       if (a.has(c)) return a;
       const n = new Set(a);
       return n.add(c), n;
@@ -27,17 +27,17 @@ const A = o.forwardRef(
       return n.delete(c), n;
     })), []), k = (c) => {
       g || p(c), d?.(c);
-    }, s = o.useMemo(
-      () => ({ value: i, onValueChange: k, variant: l, baseId: m, panels: y, registerPanel: w }),
+    }, o = s.useMemo(
+      () => ({ value: i, onValueChange: k, variant: l, baseId: m, panels: w, registerPanel: y }),
       // handleChange 는 렌더마다 새로 만들어지지만 참조하는 값이 아래 의존성에 모두 들어 있다
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [i, g, d, l, m, y, w]
+      [i, g, d, l, m, w, y]
     );
-    return /* @__PURE__ */ h($.Provider, { value: s, children: /* @__PURE__ */ h("div", { ref: x, className: T("flex flex-col", b), children: f }) });
+    return /* @__PURE__ */ h($.Provider, { value: o, children: /* @__PURE__ */ h("div", { ref: x, className: T("flex flex-col", b), children: f }) });
   }
 );
 A.displayName = "Tabs";
-const R = o.forwardRef(
+const R = s.forwardRef(
   ({ children: e, className: t }, d) => {
     const { variant: l } = C();
     return /* @__PURE__ */ h(
@@ -57,16 +57,16 @@ const R = o.forwardRef(
   }
 );
 R.displayName = "TabsList";
-const P = o.forwardRef(
+const P = s.forwardRef(
   ({ value: e, disabled: t, children: d, className: l, onClick: f, onKeyDown: b, ...x }, u) => {
-    const { value: p, onValueChange: g, variant: i, baseId: m, panels: y } = C(), r = p === e, w = y.has(e), k = (s) => {
-      if (b?.(s), s.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(s.key)) return;
-      const a = s.currentTarget.closest('[role="tablist"]'), n = Array.from(
+    const { value: p, onValueChange: g, variant: i, baseId: m, panels: w } = C(), r = p === e, y = w.has(e), k = (o) => {
+      if (b?.(o), o.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(o.key)) return;
+      const a = o.currentTarget.closest('[role="tablist"]'), n = Array.from(
         a?.querySelectorAll('[role="tab"]:not([disabled])') ?? []
       );
       if (n.length === 0) return;
-      s.preventDefault();
-      const I = n.indexOf(s.currentTarget), N = s.key === "Home" ? 0 : s.key === "End" ? n.length - 1 : s.key === "ArrowRight" ? (I + 1 + n.length) % n.length : (I - 1 + n.length) % n.length;
+      o.preventDefault();
+      const I = n.indexOf(o.currentTarget), N = o.key === "Home" ? 0 : o.key === "End" ? n.length - 1 : o.key === "ArrowRight" ? (I + 1 + n.length) % n.length : (I - 1 + n.length) % n.length;
       n[N].focus(), n[N].click();
     };
     return /* @__PURE__ */ h(
@@ -77,15 +77,15 @@ const P = o.forwardRef(
         type: "button",
         id: `${m}-tab-${e}`,
         "aria-selected": r,
-        "aria-controls": w ? `${m}-panel-${e}` : void 0,
+        "aria-controls": y ? `${m}-panel-${e}` : void 0,
         tabIndex: r ? 0 : -1,
         disabled: t,
-        onClick: (s) => {
-          t || g(e), f?.(s);
+        onClick: (o) => {
+          t || g(e), f?.(o);
         },
         onKeyDown: k,
         className: T(
-          "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-colors focus-visible:outline-none",
+          "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-[color,background-color,border-color,box-shadow] focus-visible:outline-none",
           // 선택되지 않은 탭(비활성 포함)은 모든 변형 공통 14 Regular. 선택된 탭의 글씨는 변형별로 아래에서 정한다
           !r && "text-body-2-r",
           i === "underline" && [
@@ -113,8 +113,8 @@ const P = o.forwardRef(
           ],
           i === "round" && [
             "h-7 px-2.5 rounded",
-            r && "text-body-4-r",
-            r && !t && "bg-ds-surface-alternative text-ds-text-strong",
+            r && "text-body-4-m",
+            r && !t && "bg-ds-surface-alternative text-ds-text-strong shadow-ds-default",
             !r && !t && "bg-ds-surface-strong text-ds-text-normal",
             t && "bg-ds-surface-strong text-ds-text-disabled cursor-not-allowed"
           ],
@@ -127,10 +127,10 @@ const P = o.forwardRef(
   }
 );
 P.displayName = "TabsTrigger";
-const S = o.forwardRef(
+const S = s.forwardRef(
   ({ value: e, children: t, className: d }, l) => {
     const { value: f, baseId: b, registerPanel: x } = C(), u = f === e;
-    return o.useEffect(() => {
+    return s.useEffect(() => {
       if (u)
         return x(e);
     }, [u, e, x]), u ? /* @__PURE__ */ h(

package/dist/components/ui/timeline-tracks.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+/** Timeline 트랙 타입 · 색 팔레트 · 트랙 행 렌더러. Timeline 내부용 — 타입만 index.tsx 로 공개한다. */
+export interface TimelineTrackBase {
+    id: string;
+    label: React.ReactNode;
+    /**
+     * 트랙 색 강제 지정 (CSS color · `var(--ds-*)`). 보통은 비워 둔다 — 비우면
+     * `TRACK_PALETTE` 에서 서로 잘 구분되는 색이 트랙 순서대로 자동 배정된다.
+     */
+    color?: string;
+    /** 표 아래 범례에 쓰는 설명 (예: `Probability (darker = higher)`). 없으면 범례에서 빠진다. */
+    description?: React.ReactNode;
+}
+/** 구간별 강도 — `values` 를 전체 길이에 균등 분할해 진할수록 높게 칠한다. */
+export interface TimelineHeatmapTrack extends TimelineTrackBase {
+    type: "heatmap";
+    /**
+     * 0~1. 값 하나가 구간 하나(div)라 화면 폭보다 많으면 보이지도 않고 DOM 만 늘어난다 —
+     * 소비처에서 구간 평균으로 줄여 수백 개 이하로 넘긴다.
+     */
+    values: number[];
+}
+/** 시간에 따른 점수 — 균등 간격 샘플을 영역 그래프로 그린다. */
+export interface TimelineLineTrack extends TimelineTrackBase {
+    type: "line";
+    values: number[];
+    /** `values` 의 최댓값 기준. 기본 100 */
+    max?: number;
+}
+/** 이벤트 구간 — 시작·끝(초)에 막대를 놓는다. */
+export interface TimelineEventsTrack extends TimelineTrackBase {
+    type: "events";
+    events: {
+        start: number;
+        end: number;
+        label?: string;
+    }[];
+}
+export type TimelineTrack = TimelineHeatmapTrack | TimelineLineTrack | TimelineEventsTrack;
+/**
+ * 자동 배정 순서 — `category` 토큰 11색을 CIEDE2000 기준 farthest-point 로 정렬했다.
+ * 각 색은 앞선 색들과 플레이헤드 빨강(`primary-red-normal`)에서 가장 먼 것을 고른 결과이고,
+ * 괄호는 앞선 색들·플레이헤드와의 최소 ΔE00 이다. 앞 6색은 서로 ΔE00 ≥ 21.8 로 한눈에 구분되고,
+ * 7번째부터는 차이가 줄어 트랙이 많으면 비슷한 색이 섞일 수 있다.
+ * 토큰 값이 바뀌면 순서를 다시 계산해야 한다 — `npm run check:tokens` 가 순서와 최솟값을 대조한다.
+ */
+export declare const TRACK_PALETTE: readonly ["var(--ds-category-politics)", "var(--ds-category-talk)", "var(--ds-category-religion)", "var(--ds-category-overseas)", "var(--ds-category-controversy)", "var(--ds-category-custom)", "var(--ds-category-sensitive)", "var(--ds-category-hate)", "var(--ds-category-issue)", "var(--ds-category-violence)", "var(--ds-category-sexual)"];
+export declare const ROW_HEIGHT: Record<TimelineTrack["type"], string>;
+export declare function TrackSwatch({ track, color }: {
+    track: TimelineTrack;
+    color: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const HeatmapRow: React.NamedExoticComponent<{
+    track: TimelineHeatmapTrack;
+    color: string;
+    duration: number;
+}>;
+export declare const LineRow: React.NamedExoticComponent<{
+    track: TimelineLineTrack;
+    color: string;
+}>;
+export declare const EventsRow: React.NamedExoticComponent<{
+    track: TimelineEventsTrack;
+    color: string;
+    duration: number;
+}>;

package/dist/components/ui/timeline-tracks.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as n, jsxs as g, Fragment as x } from "react/jsx-runtime";
+import { formatTime as c } from "../../lib/format-time.js";
+import { clamp as l } from "../../lib/utils.js";
+import * as u from "react";
+const b = [
+  "var(--ds-category-politics)",
+  // 초록 (70.6)
+  "var(--ds-category-talk)",
+  // 파랑 (46.4)
+  "var(--ds-category-religion)",
+  // 노랑 (36.2)
+  "var(--ds-category-overseas)",
+  // 분홍 (34.2)
+  "var(--ds-category-controversy)",
+  // 청록 (24.5)
+  "var(--ds-category-custom)",
+  // 올리브 (21.9)
+  "var(--ds-category-sensitive)",
+  // 자주 (21.6)
+  "var(--ds-category-hate)",
+  // 보라 (20.2)
+  "var(--ds-category-issue)",
+  // 하늘 (19.4)
+  "var(--ds-category-violence)",
+  // 살구 (17.4)
+  "var(--ds-category-sexual)"
+  // 빨강 (5.6)
+], d = (o, e) => `color-mix(in srgb, ${o} ${Math.round(l(e, 0, 1) * 100)}%, var(--ds-background-default))`, v = (o) => 0.15 + 0.85 * l(o, 0, 1), R = {
+  heatmap: "h-10",
+  line: "h-[60px]",
+  events: "h-10"
+};
+function k({ track: o, color: e }) {
+  return o.type === "heatmap" ? /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "flex h-2 w-2 shrink-0", children: [0, 0.5, 1].map((s) => /* @__PURE__ */ n("span", { className: "h-full flex-1", style: { background: d(e, v(s)) } }, s)) }) : /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "size-2 shrink-0", style: { background: e } });
+}
+const N = u.memo(function({ track: e, color: s, duration: r }) {
+  const t = e.values.length;
+  return /* @__PURE__ */ n("div", { className: "flex h-3 w-full", children: e.values.map((i, a) => /* @__PURE__ */ n(
+    "div",
+    {
+      title: `${c(a / t * r)}–${c((a + 1) / t * r)} · ${Math.round(l(i, 0, 1) * 100)}%`,
+      className: "h-full min-w-px flex-1 hover:outline hover:outline-1 hover:-outline-offset-1 hover:outline-ds-primitive-black",
+      style: { background: d(s, v(i)) }
+    },
+    a
+  )) });
+}), E = u.memo(function({ track: e, color: s }) {
+  const r = e.max && e.max > 0 ? e.max : 100, t = e.values.length;
+  if (t === 0) return null;
+  const a = `M${e.values.map((m, h) => {
+    const p = t === 1 ? 50 : h / (t - 1) * 100, f = 100 - l(m / r, 0, 1) * 100;
+    return `${p},${f}`;
+  }).join(" L")}`;
+  return /* @__PURE__ */ g("svg", { "aria-hidden": !0, viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-x-0 bottom-0 top-3 h-[calc(100%-12px)] w-full overflow-visible", children: [
+    /* @__PURE__ */ n("path", { d: `${a} L100,100 L0,100 Z`, fill: s, fillOpacity: 0.12 }),
+    /* @__PURE__ */ n("path", { d: a, fill: "none", stroke: s, strokeWidth: 1, vectorEffect: "non-scaling-stroke" })
+  ] });
+}), L = u.memo(function({ track: e, color: s, duration: r }) {
+  return /* @__PURE__ */ n(x, { children: e.events.map((t, i) => {
+    const a = l(t.start / r, 0, 1), m = l(t.end / r, a, 1);
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        title: `${t.label ? `${t.label} · ` : ""}${c(t.start)}–${c(t.end)}`,
+        className: "absolute top-1/2 h-3 min-w-[2px] -translate-y-1/2",
+        style: { left: `${a * 100}%`, width: `${(m - a) * 100}%`, background: s }
+      },
+      i
+    );
+  }) });
+});
+export {
+  L as EventsRow,
+  N as HeatmapRow,
+  E as LineRow,
+  R as ROW_HEIGHT,
+  b as TRACK_PALETTE,
+  k as TrackSwatch
+};

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

@@ -0,0 +1,31 @@
+import { TimelineTrack } from './timeline-tracks';
+import * as React from "react";
+export type { TimelineTrack, TimelineHeatmapTrack, TimelineLineTrack, TimelineEventsTrack, } from './timeline-tracks';
+export interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSeek"> {
+    /** 전체 길이(초) */
+    duration: number;
+    /**
+     * 트랙 행은 `React.memo` 라 플레이헤드가 움직여도 다시 그리지 않는다 — 단, 트랙 객체 참조가 같을 때만.
+     * `currentTime` 을 가진 컴포넌트에서 렌더마다 `.map` 으로 새로 만들지 말고 `useMemo` 등으로 고정해 넘긴다.
+     */
+    tracks: TimelineTrack[];
+    /** 재생 위치(초) — 주면 빨간 플레이헤드를 그린다. `onSeek` 을 쓰면 키보드 이동 기준이므로 함께 넘긴다 */
+    currentTime?: number;
+    /** 시간 영역 클릭·키보드(←→)로 위치를 고르면 초 단위로 호출된다 */
+    onSeek?: (time: number) => void;
+    /**
+     * 눈금 간격(초, 1 이상). 비우면 길이·폭에 맞춰 눈금이 최대 8개가 되도록 고른다 (60초 영상 → 10초).
+     * 주어도 1초 미만이거나 눈금이 폭에 비해 너무 많아지면(눈금당 64px 미만) 자동 간격을 쓴다.
+     */
+    tickInterval?: number;
+    /** 접근성 라벨 — `onSeek` 이 있으면 시크 슬라이더(기본 "타임라인 재생 위치"), 없으면 루트에 붙는다 */
+    "aria-label"?: string;
+    /** 트랙 이름 열 폭(px). 기본 240 (Figma). 좁은 화면에서는 줄여서 넘긴다. */
+    labelWidth?: number;
+}
+/**
+ * Figma TimeLine (Instant Case). 영상 길이를 가로축으로 히트맵·점수 그래프·이벤트 구간 트랙을
+ * 쌓고, 재생 위치를 빨간 플레이헤드로 보여준다. 트랙 색은 `TRACK_PALETTE` 에서 자동 배정된다.
+ */
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;
+export { Timeline };

package/dist/components/ui/timeline.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { formatTime as T } from "../../lib/format-time.js";
+import { cn as m, clamp as w } from "../../lib/utils.js";
+import * as d from "react";
+import { TRACK_PALETTE as M, TrackSwatch as F, HeatmapRow as W, LineRow as $, EventsRow as j, ROW_HEIGHT as z } from "./timeline-tracks.js";
+const G = 100, U = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600], V = 8, Z = 64, q = 32;
+function J(u, c) {
+  const f = u / c;
+  return U.find((r) => r >= f) ?? Math.ceil(f / 3600) * 3600;
+}
+const A = "w-[var(--timeline-label-w)]", P = d.forwardRef(
+  ({ duration: u, tracks: c, currentTime: f, onSeek: r, tickInterval: v, "aria-label": p, labelWidth: E = 240, className: I, ..._ }, C) => {
+    const x = d.useRef(null), [h, D] = d.useState(0);
+    d.useEffect(() => {
+      const e = x.current;
+      if (!e || typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver(([i]) => D(i.contentRect.width));
+      return t.observe(e), () => t.disconnect();
+    }, []);
+    const a = Number.isFinite(u) && u > 0, l = a ? u : 1, y = h > 0 ? Math.max(2, Math.floor(h / Z)) : G, L = Math.min(V, y), b = v != null && v >= 1 && l / v <= y ? v : J(l, L), K = d.useMemo(() => {
+      if (!a) return [];
+      const e = [];
+      for (let t = 0; t <= l + 1e-6; t += b) e.push(t);
+      return e;
+    }, [a, l, b]), o = w(f ?? 0, 0, l), g = !!r && a, H = (e) => {
+      const t = x.current?.getBoundingClientRect();
+      !g || !t || e.clientX < t.left || r?.(w((e.clientX - t.left) / t.width, 0, 1) * l);
+    }, O = (e) => {
+      if (!g) return;
+      const t = e.shiftKey ? b : 1, i = {
+        ArrowRight: o + t,
+        ArrowUp: o + t,
+        ArrowLeft: o - t,
+        ArrowDown: o - t,
+        Home: 0,
+        End: l
+      };
+      e.key in i && (e.preventDefault(), r?.(w(i[e.key], 0, l)));
+    }, B = d.useMemo(() => {
+      let e = 0;
+      return c.map((t) => t.color ?? M[e++ % M.length]);
+    }, [c]), N = c.filter((e) => e.description != null), R = f != null && a ? o / l * 100 : null;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: C,
+        role: !r && p ? "group" : void 0,
+        "aria-label": r ? void 0 : p,
+        className: m("flex w-full flex-col gap-2", I),
+        ..._,
+        children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              onClick: H,
+              style: { "--timeline-label-w": `${E}px` },
+              className: m(
+                "relative overflow-hidden rounded-ds-md border border-ds-line-normal bg-ds-surface-alternative",
+                g && "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ s("div", { className: "flex h-6 bg-ds-surface-normal", children: [
+                  /* @__PURE__ */ n("div", { className: m(A, "shrink-0 border-r border-ds-line-normal") }),
+                  /* @__PURE__ */ n(
+                    "div",
+                    {
+                      ref: x,
+                      role: r ? "slider" : void 0,
+                      tabIndex: r ? 0 : void 0,
+                      "aria-label": r ? p ?? "타임라인 재생 위치" : void 0,
+                      "aria-valuemin": r ? 0 : void 0,
+                      "aria-valuemax": r ? Math.round(l) : void 0,
+                      "aria-valuenow": r ? Math.round(o) : void 0,
+                      "aria-valuetext": r ? T(o) : void 0,
+                      "aria-disabled": r && !a ? !0 : void 0,
+                      onKeyDown: O,
+                      className: "relative flex-1 text-label-1-r text-ds-text-strong outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
+                      children: K.map((e, t) => {
+                        const i = e / l * 100, X = h > 0 ? (100 - i) / 100 * h < q : i >= 100;
+                        return /* @__PURE__ */ n("span", { className: m("absolute top-1/2 -translate-y-1/2 whitespace-nowrap", t === 0 ? "translate-x-2" : X ? "-translate-x-[calc(100%+8px)]" : "-translate-x-1/2"), style: { left: `${i}%` }, children: T(e) }, e);
+                      })
+                    }
+                  )
+                ] }),
+                c.map((e, t) => {
+                  const i = B[t];
+                  return /* @__PURE__ */ s("div", { className: m("flex border-t border-ds-line-normal", z[e.type]), children: [
+                    /* @__PURE__ */ s("div", { className: m(A, "flex shrink-0 items-center gap-1 border-r border-ds-line-normal px-3 text-body-4-r text-ds-text-strong"), children: [
+                      /* @__PURE__ */ n(F, { track: e, color: i }),
+                      /* @__PURE__ */ n("span", { className: "truncate", children: e.label })
+                    ] }),
+                    /* @__PURE__ */ s("div", { className: "relative flex flex-1 items-center", children: [
+                      e.type === "heatmap" && /* @__PURE__ */ n(W, { track: e, color: i, duration: l }),
+                      e.type === "line" && /* @__PURE__ */ n($, { track: e, color: i }),
+                      e.type === "events" && a && /* @__PURE__ */ n(j, { track: e, color: i, duration: l })
+                    ] })
+                  ] }, e.id);
+                }),
+                R != null && /* @__PURE__ */ n("div", { "aria-hidden": !0, className: "pointer-events-none absolute inset-y-0 left-[var(--timeline-label-w)] right-0", children: /* @__PURE__ */ s("div", { className: "absolute inset-y-0", style: { left: `${R}%` }, children: [
+                  /* @__PURE__ */ n("div", { className: "absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-ds-primary-red-normal" }),
+                  /* @__PURE__ */ n("svg", { width: "12", height: "12", viewBox: "0 0 12 12", className: "relative -left-1.5 top-1.5 text-ds-primary-red-normal", children: /* @__PURE__ */ n("path", { d: "M0.8 0H11.2L6 9Z", fill: "currentColor" }) })
+                ] }) })
+              ]
+            }
+          ),
+          N.length > 0 && /* @__PURE__ */ n("dl", { className: "grid grid-cols-[max-content_1fr] gap-x-7 gap-y-1 text-body-4-m text-ds-text-strong", children: N.map((e) => /* @__PURE__ */ s(d.Fragment, { children: [
+            /* @__PURE__ */ n("dt", { children: e.label }),
+            /* @__PURE__ */ n("dd", { children: e.description })
+          ] }, e.id)) })
+        ]
+      }
+    );
+  }
+);
+P.displayName = "Timeline";
+export {
+  P as Timeline
+};

package/dist/components/ui/toast.js

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