@weing-dev/ui-kit-primitive 0.4.6 → 0.5.0

package/dist/video-player.js

@@ -3,8 +3,8 @@ import _ from "react";
 import { c as Q } from "./bind-D3ZJ5k4I.js";
 import { useStore as We, create as Ke } from "zustand";
 import Je from "video.js";
-import { a as Ge } from "./Icon-DExqF865.js";
-const ke = (t) => Symbol.iterator in t, xe = (t) => (
+import { a as Ge } from "./Icon-DEdvzMs-.js";
+const Ce = (t) => Symbol.iterator in t, xe = (t) => (
   // HACK: avoid checking entries type
   "entries" in t
 ), we = (t, e) => {
@@ -26,7 +26,7 @@ const ke = (t) => Symbol.iterator in t, xe = (t) => (
   return !!r.done && !!l.done;
 };
 function Qe(t, e) {
-  return Object.is(t, e) ? !0 : typeof t != "object" || t === null || typeof e != "object" || e === null ? !1 : !ke(t) || !ke(e) ? we(
+  return Object.is(t, e) ? !0 : typeof t != "object" || t === null || typeof e != "object" || e === null ? !1 : !Ce(t) || !Ce(e) ? we(
     { entries: () => Object.entries(t) },
     { entries: () => Object.entries(e) }
   ) : xe(t) && xe(e) ? we(t, e) : Xe(t, e);
@@ -466,8 +466,8 @@ const F = {
     loadingText: V,
     errorTitle: N,
     errorDescription: w,
-    errorRetry: k,
-    controllerRef: C
+    errorRetry: C,
+    controllerRef: k
   } = t, x = _.useRef(null);
   x.current || (x.current = Ae(n, {
     width: s,
@@ -488,7 +488,7 @@ const F = {
     loadingText: V,
     errorTitle: N,
     errorDescription: w,
-    errorRetry: k
+    errorRetry: C
   }));
   const L = _.useMemo(() => Object.fromEntries(Object.entries({
     width: s,
@@ -508,8 +508,8 @@ const F = {
     loadingText: V,
     errorTitle: N,
     errorDescription: w,
-    errorRetry: k
-  }).filter(([, S]) => S !== void 0)), [s, r, l, o, c, d, f, u, h, a, m, y, b, v, V, N, w, k]);
+    errorRetry: C
+  }).filter(([, S]) => S !== void 0)), [s, r, l, o, c, d, f, u, h, a, m, y, b, v, V, N, w, C]);
   return _.useLayoutEffect(() => {
     if (x.current && Object.keys(L).length > 0) {
       const T = x.current.getState(), S = Me({
@@ -529,7 +529,7 @@ const F = {
       });
     }
   }, [L]), _.useEffect(() => {
-    if (!C || !x.current) return;
+    if (!k || !x.current) return;
     const T = x.current, S = {
       getPlayer: () => T.getState().player,
       isPlaying: () => T.getState().isPlaying,
@@ -559,10 +559,10 @@ const F = {
         T.getState().handleFullscreenToggle();
       }
     };
-    return C.current = S, () => {
-      C.current === S && (C.current = null);
+    return k.current = S, () => {
+      k.current === S && (k.current = null);
     };
-  }, [C]), /* @__PURE__ */ p.jsx(me, { value: x.current, children: e });
+  }, [k]), /* @__PURE__ */ p.jsx(me, { value: x.current, children: e });
 }, lt = "_Overlay_1topf_1", ot = "_fullscreen_1topf_11", it = "_OverlayGrid_1topf_19", at = "_TopLeft_1topf_32", ct = "_TopCenter_1topf_38", ut = "_TopRight_1topf_44", ft = "_MiddleLeft_1topf_50", dt = "_MiddleCenter_1topf_56", mt = "_MiddleRight_1topf_62", yt = "_BottomLeft_1topf_68", gt = "_BottomCenter_1topf_74", ht = "_BottomRight_1topf_80", pt = "_ProgressContainer_1topf_86", _t = "_visible_1topf_98", bt = "_Content_1topf_102", St = "_hidden_1topf_111", vt = {
   Overlay: lt,
   fullscreen: ot,
@@ -597,7 +597,7 @@ const F = {
   }, e[6] = r, e[7] = o) : o = e[7];
   let c;
   return e[8] !== n || e[9] !== r || e[10] !== l || e[11] !== o ? (c = /* @__PURE__ */ p.jsx("div", { className: l, ...r, onClick: o, children: n }), e[8] = n, e[9] = r, e[10] = l, e[11] = o, e[12] = c) : c = e[12], c;
-}, Ct = (t) => {
+}, kt = (t) => {
   const e = B.c(10);
   let n, s, r;
   e[0] !== t ? ({
@@ -609,7 +609,7 @@ const F = {
   e[4] !== s ? (l = G("TopLeft", s), e[4] = s, e[5] = l) : l = e[5];
   let o;
   return e[6] !== n || e[7] !== r || e[8] !== l ? (o = /* @__PURE__ */ p.jsx("div", { className: l, ...r, children: n }), e[6] = n, e[7] = r, e[8] = l, e[9] = o) : o = e[9], o;
-}, kt = (t) => {
+}, Ct = (t) => {
   const e = B.c(10);
   let n, s, r;
   e[0] !== t ? ({
@@ -710,7 +710,7 @@ const F = {
     className: n,
     onOverlayClick: s,
     children: r
-  } = t, l = n === void 0 ? "" : n, o = _.useContext(me);
+  } = t, l = n === void 0 ? "" : n, o = _.use(me);
   if (!o)
     throw new Error("VideoOverlay는 VideoPlayerProvider 내부에서만 사용해야 합니다.");
   let c;
@@ -744,23 +744,23 @@ const F = {
     isPictureInPicture: u
   }), e[8] = r, e[9] = b, e[10] = f, e[11] = u, e[12] = a, e[13] = m, e[14] = i, e[15] = N) : N = e[15];
   const w = N;
-  let k;
-  e[16] !== o ? (k = (S) => {
+  let C;
+  e[16] !== o ? (C = (S) => {
     S === null && o.getState().clearOverlayAutoHideTimer();
-  }, e[16] = o, e[17] = k) : k = e[17];
-  const C = !i;
+  }, e[16] = o, e[17] = C) : C = e[17];
+  const k = !i;
   let x;
-  e[18] !== C ? (x = G("Content", {
-    hidden: C
-  }), e[18] = C, e[19] = x) : x = e[19];
+  e[18] !== k ? (x = G("Content", {
+    hidden: k
+  }), e[18] = k, e[19] = x) : x = e[19];
   let L;
   e[20] !== w || e[21] !== x ? (L = /* @__PURE__ */ p.jsx("div", { className: x, children: w }), e[20] = w, e[21] = x, e[22] = L) : L = e[22];
   let T;
-  return e[23] !== V || e[24] !== b || e[25] !== a || e[26] !== m || e[27] !== k || e[28] !== L ? (T = /* @__PURE__ */ p.jsx("div", { className: V, onMouseMove: a, onMouseLeave: m, onClick: b, ref: k, role: "presentation", children: L }), e[23] = V, e[24] = b, e[25] = a, e[26] = m, e[27] = k, e[28] = L, e[29] = T) : T = e[29], T;
+  return e[23] !== V || e[24] !== b || e[25] !== a || e[26] !== m || e[27] !== C || e[28] !== L ? (T = /* @__PURE__ */ p.jsx("div", { className: V, onMouseMove: a, onMouseLeave: m, onClick: b, ref: C, role: "presentation", children: L }), e[23] = V, e[24] = b, e[25] = a, e[26] = m, e[27] = C, e[28] = L, e[29] = T) : T = e[29], T;
 }, It = Object.assign(Nt, {
   Grid: Tt,
-  TopLeft: Ct,
-  TopCenter: kt,
+  TopLeft: kt,
+  TopCenter: Ct,
   TopRight: xt,
   MiddleLeft: wt,
   MiddleCenter: Lt,
@@ -868,18 +868,18 @@ const F = {
   e[12] !== h ? (N = /* @__PURE__ */ p.jsx("h3", { className: V, children: h }), e[12] = h, e[13] = N) : N = e[13];
   let w;
   e[14] === Symbol.for("react.memo_cache_sentinel") ? (w = ge("ErrorDescription"), e[14] = w) : w = e[14];
-  let k;
-  e[15] !== i ? (k = /* @__PURE__ */ p.jsx("p", { className: w, children: i }), e[15] = i, e[16] = k) : k = e[16];
   let C;
-  e[17] === Symbol.for("react.memo_cache_sentinel") ? (C = ge("ErrorActionButton"), e[17] = C) : C = e[17];
+  e[15] !== i ? (C = /* @__PURE__ */ p.jsx("p", { className: w, children: i }), e[15] = i, e[16] = C) : C = e[16];
+  let k;
+  e[17] === Symbol.for("react.memo_cache_sentinel") ? (k = ge("ErrorActionButton"), e[17] = k) : k = e[17];
   let x;
-  e[18] !== y || e[19] !== a ? (x = /* @__PURE__ */ p.jsx("button", { className: C, onClick: y, children: a }), e[18] = y, e[19] = a, e[20] = x) : x = e[20];
+  e[18] !== y || e[19] !== a ? (x = /* @__PURE__ */ p.jsx("button", { className: k, onClick: y, children: a }), e[18] = y, e[19] = a, e[20] = x) : x = e[20];
   let L;
-  return e[21] !== b || e[22] !== N || e[23] !== k || e[24] !== x ? (L = /* @__PURE__ */ p.jsxs("div", { className: b, children: [
+  return e[21] !== b || e[22] !== N || e[23] !== C || e[24] !== x ? (L = /* @__PURE__ */ p.jsxs("div", { className: b, children: [
     N,
-    k,
+    C,
     x
-  ] }), e[21] = b, e[22] = N, e[23] = k, e[24] = x, e[25] = L) : L = e[25], L;
+  ] }), e[21] = b, e[22] = N, e[23] = C, e[24] = x, e[25] = L) : L = e[25], L;
 }, Wt = "_Frame_1y5ek_1", Kt = {
   Frame: Wt,
   "vjs-tech": "_vjs-tech_1y5ek_23",
@@ -952,7 +952,7 @@ const F = {
     setVolume: v,
     volume: V,
     playbackRate: N
-  } = Y(["width", "height", "src", "sources", "speedOptions", "playerOptions", "events", "disableVideoJsStyles", "tracks", "player", "activeCaptionLang", "setState", "setPlayer", "setVolume", "volume", "playbackRate"]), w = _.useRef(null), k = _.useRef(null), C = _.useRef(null), x = _.useRef(0), L = _.useRef([]), T = _.useRef(null), S = _.useRef(null), j = _.useRef(V), E = _.useRef(N), D = _.useRef(m);
+  } = Y(["width", "height", "src", "sources", "speedOptions", "playerOptions", "events", "disableVideoJsStyles", "tracks", "player", "activeCaptionLang", "setState", "setPlayer", "setVolume", "volume", "playbackRate"]), w = _.useRef(null), C = _.useRef(null), k = _.useRef(null), x = _.useRef(0), L = _.useRef([]), T = _.useRef(null), S = _.useRef(null), j = _.useRef(V), E = _.useRef(N), D = _.useRef(m);
   D.current = m;
   const H = _.useMemo(() => zt({
     src: o ?? "",
@@ -974,18 +974,18 @@ const F = {
       }
   }, [a, m]), _.useLayoutEffect(() => () => {
     var I;
-    x.current += 1, (I = C.current) == null || I.call(C), C.current = null, y({
+    x.current += 1, (I = k.current) == null || I.call(k), k.current = null, y({
       isPictureInPicture: !1
     });
-    const A = k.current;
-    A && (A.dispose(), k.current = null, b(null)), T.current = null, S.current = null, L.current.length > 0 && (L.current.forEach((q) => {
+    const A = C.current;
+    A && (A.dispose(), C.current = null, b(null)), T.current = null, S.current = null, L.current.length > 0 && (L.current.forEach((q) => {
       URL.revokeObjectURL(q);
     }), L.current = []);
   }, [b, y]), _.useLayoutEffect(() => {
     var U;
     if (!o)
       return;
-    const A = JSON.stringify(H), I = k.current;
+    const A = JSON.stringify(H), I = C.current;
     if (I && T.current !== null && T.current === O) {
       S.current !== A && (I.src(H), I.load(), y({
         hasError: !1,
@@ -993,11 +993,11 @@ const F = {
       }), S.current = A);
       return;
     }
-    if (I && T.current !== O && ((U = C.current) == null || U.call(C), C.current = null, y({
+    if (I && T.current !== O && ((U = k.current) == null || U.call(k), k.current = null, y({
       isPictureInPicture: !1
-    }), I.dispose(), k.current = null, b(null), T.current = null, S.current = null, L.current.length > 0 && (L.current.forEach((te) => {
+    }), I.dispose(), C.current = null, b(null), T.current = null, S.current = null, L.current.length > 0 && (L.current.forEach((te) => {
       URL.revokeObjectURL(te);
-    }), L.current = [])), k.current)
+    }), L.current = [])), C.current)
       return;
     (async () => {
       var ne, fe;
@@ -1024,7 +1024,7 @@ const F = {
           default: oe(D.current) !== "" && oe(P.srclang) === oe(D.current)
         };
       })) : void 0;
-      if (te !== x.current || !((fe = w.current) != null && fe.isConnected) || k.current)
+      if (te !== x.current || !((fe = w.current) != null && fe.isConnected) || C.current)
         return;
       const ie = {
         ...{
@@ -1056,13 +1056,13 @@ const F = {
       };
       try {
         const P = Je(w.current, ie);
-        k.current = P, T.current = O, S.current = A, b(P), P.on("ready", () => {
+        C.current = P, T.current = O, S.current = A, b(P), P.on("ready", () => {
           var W;
           y({
             isLoading: !1
           }), P.volume(j.current), P.playbackRate(E.current), v(j.current), y({
             playbackRate: E.current
-          }), (W = C.current) == null || W.call(C), C.current = null;
+          }), (W = k.current) == null || W.call(k), k.current = null;
           const R = Oe(P);
           if (R) {
             const Z = () => {
@@ -1079,7 +1079,7 @@ const F = {
                 isPictureInPicture: !1
               }), g != null && g.onPictureInPictureChange && g.onPictureInPictureChange(!1);
             };
-            R.addEventListener("enterpictureinpicture", z), R.addEventListener("leavepictureinpicture", ae), Z(), C.current = () => {
+            R.addEventListener("enterpictureinpicture", z), R.addEventListener("leavepictureinpicture", ae), Z(), k.current = () => {
               R.removeEventListener("enterpictureinpicture", z), R.removeEventListener("leavepictureinpicture", ae);
             };
           }
@@ -1150,7 +1150,7 @@ const F = {
       }
     })();
   }, [o, r, l, O, b, y, v, H, $, f, g]), _.useLayoutEffect(() => {
-    const A = k.current;
+    const A = C.current;
     A && (A.width(r), A.height(l));
   }, [r, l]), /* @__PURE__ */ p.jsx("video", { ref: w, className: Yt("VideoElement", "video-js", h ? "" : "vjs-default-skin", e), preload: n ?? "auto", ...s });
 }, nn = "_Thumbnail_1hgib_1", rn = "_ThumbnailImage_1hgib_11", sn = {
@@ -1184,7 +1184,7 @@ const F = {
   return e[13] !== n || e[14] !== i || e[15] !== m ? (y = /* @__PURE__ */ p.jsx("div", { className: i, ...n, children: m }), e[13] = n, e[14] = i, e[15] = m, e[16] = y) : y = e[16], y;
 }, on = "_WidgetButton_1g3p0_2", an = {
   WidgetButton: on
-}, cn = Q.bind(an), Ce = (t) => {
+}, cn = Q.bind(an), ke = (t) => {
   const e = B.c(20);
   let n, s, r, l, o, c;
   e[0] !== t ? ({
@@ -1227,7 +1227,7 @@ const F = {
     buffered: h,
     currentTime: i,
     handleSeek: a
-  } = Y(c), m = _.useRef(i), y = _.useRef(null), [b, v] = _.useState(0), [V, N] = _.useState(0), [w, k] = _.useState(!1), [C, x] = _.useState(!1), L = _.useRef(void 0);
+  } = Y(c), m = _.useRef(i), y = _.useRef(null), [b, v] = _.useState(0), [V, N] = _.useState(0), [w, C] = _.useState(!1), [k, x] = _.useState(!1), L = _.useRef(void 0);
   let T, S;
   e[1] !== h || e[2] !== u || e[3] !== d || e[4] !== f ? (T = () => {
     let M = Date.now();
@@ -1275,7 +1275,7 @@ const F = {
   const O = $;
   let K;
   e[18] !== O ? (K = (M) => {
-    M.preventDefault(), M.stopPropagation(), k(!0), O(M.clientX);
+    M.preventDefault(), M.stopPropagation(), C(!0), O(M.clientX);
   }, e[18] = O, e[19] = K) : K = e[19];
   const g = K;
   let A, I;
@@ -1285,7 +1285,7 @@ const F = {
     const M = (X) => {
       O(X.clientX);
     }, J = () => {
-      k(!1);
+      C(!1);
     };
     return window.addEventListener("pointermove", M), window.addEventListener("pointerup", J), () => {
       window.removeEventListener("pointermove", M), window.removeEventListener("pointerup", J);
@@ -1304,9 +1304,9 @@ const F = {
     }
   };
   let U, te;
-  e[24] !== w || e[25] !== C || e[26] !== s ? (U = () => {
-    s && s(w || C);
-  }, te = [w, C, s], e[24] = w, e[25] = C, e[26] = s, e[27] = U, e[28] = te) : (U = e[27], te = e[28]), _.useEffect(U, te);
+  e[24] !== w || e[25] !== k || e[26] !== s ? (U = () => {
+    s && s(w || k);
+  }, te = [w, k, s], e[24] = w, e[25] = k, e[26] = s, e[27] = U, e[28] = te) : (U = e[27], te = e[28]), _.useEffect(U, te);
   let re, se;
   e[29] === Symbol.for("react.memo_cache_sentinel") ? (re = () => () => {
     L.current && window.clearTimeout(L.current);
@@ -1343,7 +1343,7 @@ const F = {
   ] }), e[38] = Z, e[39] = ee, e[40] = ce) : ce = e[40];
   let ye;
   return e[41] !== ue || e[42] !== q || e[43] !== g || e[44] !== ne || e[45] !== ie || e[46] !== ce ? (ye = /* @__PURE__ */ p.jsx("div", { className: ue, ref: y, onPointerDown: g, onKeyDown: q, role: "progressbar", tabIndex: 0, "aria-valuenow": ne, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ie, children: ce }), e[41] = ue, e[42] = q, e[43] = g, e[44] = ne, e[45] = ie, e[46] = ce, e[47] = ye) : ye = e[47], ye;
-}, hn = "_VolumeControl_cqcm4_1", pn = "_isActive_cqcm4_25", _n = "_VolumeSlider_cqcm4_30", bn = "_VolumeButton_cqcm4_35", Sn = "_InlineTrackWrapper_cqcm4_63", vn = "_InlineTrackBackground_cqcm4_78", Tn = "_InlineTrackProgress_cqcm4_88", Cn = "_InlineThumb_cqcm4_98", kn = "_VolumeValue_cqcm4_110", xn = {
+}, hn = "_VolumeControl_cqcm4_1", pn = "_isActive_cqcm4_25", _n = "_VolumeSlider_cqcm4_30", bn = "_VolumeButton_cqcm4_35", Sn = "_InlineTrackWrapper_cqcm4_63", vn = "_InlineTrackBackground_cqcm4_78", Tn = "_InlineTrackProgress_cqcm4_88", kn = "_InlineThumb_cqcm4_98", Cn = "_VolumeValue_cqcm4_110", xn = {
   VolumeControl: hn,
   isActive: pn,
   VolumeSlider: _n,
@@ -1351,8 +1351,8 @@ const F = {
   InlineTrackWrapper: Sn,
   InlineTrackBackground: vn,
   InlineTrackProgress: Tn,
-  InlineThumb: Cn,
-  VolumeValue: kn
+  InlineThumb: kn,
+  VolumeValue: Cn
 }, le = Q.bind(xn);
 function Re(t, e) {
   return t === void 0 ? {
@@ -1390,7 +1390,7 @@ const wn = (t) => {
   }), [v]), w = _.useCallback((S) => {
     const j = Math.min(Math.max(S, 0), 1);
     u(j);
-  }, [u]), k = _.useCallback((S) => {
+  }, [u]), C = _.useCallback((S) => {
     const j = V.current;
     if (j === null)
       return;
@@ -1399,23 +1399,23 @@ const wn = (t) => {
       return;
     const D = (S - E.left) / E.width;
     w(D);
-  }, [w]), C = _.useCallback((S) => {
-    S.preventDefault(), a(!0), y(!0), k(S.clientX);
-  }, [k]);
+  }, [w]), k = _.useCallback((S) => {
+    S.preventDefault(), a(!0), y(!0), C(S.clientX);
+  }, [C]);
   _.useEffect(() => {
     n && n(b || m);
   }, [m, n, b]), _.useEffect(() => {
     if (!m)
       return;
     const S = (E) => {
-      k(E.clientX);
+      C(E.clientX);
     }, j = () => {
       y(!1), a(!1);
     };
     return window.addEventListener("pointermove", S), window.addEventListener("pointerup", j), () => {
       window.removeEventListener("pointermove", S), window.removeEventListener("pointerup", j);
     };
-  }, [m, k]);
+  }, [m, C]);
   const x = _.useCallback((S) => {
     S.key === "ArrowRight" || S.key === "ArrowUp" ? (S.preventDefault(), w(v + 0.05), a(!0)) : (S.key === "ArrowLeft" || S.key === "ArrowDown") && (S.preventDefault(), w(v - 0.05), a(!0));
   }, [w, v]), L = le("VolumeControl", {
@@ -1434,12 +1434,12 @@ const wn = (t) => {
     sliderValue: v,
     onSliderFocus: a,
     onPointerDown: (S) => {
-      C(S);
+      k(S);
     },
     trackRef: V
   }) }) : /* @__PURE__ */ p.jsxs("div", { className: L, children: [
-    /* @__PURE__ */ p.jsx(Ce, { className: le("VolumeButton"), icon: f ? o.volumeOff : o.volumeOn, onClick: h, ariaLabel: T }),
-    /* @__PURE__ */ p.jsx("div", { className: le("VolumeSlider"), "aria-hidden": !b, children: /* @__PURE__ */ p.jsxs("div", { className: le("InlineTrackWrapper"), ref: V, role: "slider", "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": Number(v.toFixed(2)), "aria-valuetext": `${Math.round(v * 100)}%`, tabIndex: 0, style: N, onPointerDown: C, onKeyDown: x, onFocus: () => a(!0), onBlur: () => a(!1), children: [
+    /* @__PURE__ */ p.jsx(ke, { className: le("VolumeButton"), icon: f ? o.volumeOff : o.volumeOn, onClick: h, ariaLabel: T }),
+    /* @__PURE__ */ p.jsx("div", { className: le("VolumeSlider"), "aria-hidden": !b, children: /* @__PURE__ */ p.jsxs("div", { className: le("InlineTrackWrapper"), ref: V, role: "slider", "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": Number(v.toFixed(2)), "aria-valuetext": `${Math.round(v * 100)}%`, tabIndex: 0, style: N, onPointerDown: k, onKeyDown: x, onFocus: () => a(!0), onBlur: () => a(!1), children: [
       /* @__PURE__ */ p.jsx("div", { className: le("InlineTrackBackground"), children: /* @__PURE__ */ p.jsx("div", { className: le("InlineTrackProgress") }) }),
       /* @__PURE__ */ p.jsx("div", { className: le("InlineThumb") })
     ] }) })
@@ -1482,23 +1482,23 @@ const wn = (t) => {
     c === "cycle" ? v() : a($n);
   }, e[7] = v, e[8] = c, e[9] = V) : V = e[9];
   const N = V;
-  let w, k, C;
+  let w, C, k;
   if (e[10] !== r || e[11] !== l || e[12] !== o || e[13] !== N || e[14] !== y || e[15] !== i || e[16] !== f || e[17] !== u || e[18] !== c) {
-    C = Symbol.for("react.early_return_sentinel");
+    k = Symbol.for("react.early_return_sentinel");
     e:
-      if (w = de("SpeedControl", o, c), k = r ?? F.aria.speed, l) {
+      if (w = de("SpeedControl", o, c), C = r ?? F.aria.speed, l) {
         let $, O;
         e[22] !== c ? ($ = () => {
           c === "menu" && a(!0);
         }, O = () => {
           c === "menu" && a(!1);
-        }, e[22] = c, e[23] = $, e[24] = O) : ($ = e[23], O = e[24]), C = /* @__PURE__ */ p.jsx(p.Fragment, { children: l({
+        }, e[22] = c, e[23] = $, e[24] = O) : ($ = e[23], O = e[24]), k = /* @__PURE__ */ p.jsx(p.Fragment, { children: l({
           defaultClassName: w,
           playbackRate: f,
           speedOptions: u,
           variant: c,
           isOpen: i,
-          ariaLabel: k,
+          ariaLabel: C,
           onButtonClick: N,
           onSpeedSelect: y,
           onMouseEnter: $,
@@ -1506,11 +1506,11 @@ const wn = (t) => {
         }) });
         break e;
       }
-    e[10] = r, e[11] = l, e[12] = o, e[13] = N, e[14] = y, e[15] = i, e[16] = f, e[17] = u, e[18] = c, e[19] = w, e[20] = k, e[21] = C;
+    e[10] = r, e[11] = l, e[12] = o, e[13] = N, e[14] = y, e[15] = i, e[16] = f, e[17] = u, e[18] = c, e[19] = w, e[20] = C, e[21] = k;
   } else
-    w = e[19], k = e[20], C = e[21];
-  if (C !== Symbol.for("react.early_return_sentinel"))
-    return C;
+    w = e[19], C = e[20], k = e[21];
+  if (k !== Symbol.for("react.early_return_sentinel"))
+    return k;
   let x, L;
   e[25] !== c ? (x = () => {
     c === "menu" && a(!0);
@@ -1527,7 +1527,7 @@ const wn = (t) => {
     "x"
   ] }), e[30] = f, e[31] = j) : j = e[31];
   let E;
-  e[32] !== N || e[33] !== k || e[34] !== j ? (E = /* @__PURE__ */ p.jsx(Ce, { className: T, ariaLabel: k, onClick: N, children: j }), e[32] = N, e[33] = k, e[34] = j, e[35] = E) : E = e[35];
+  e[32] !== N || e[33] !== C || e[34] !== j ? (E = /* @__PURE__ */ p.jsx(ke, { className: T, ariaLabel: C, onClick: N, children: j }), e[32] = N, e[33] = C, e[34] = j, e[35] = E) : E = e[35];
   let D;
   e[36] !== y || e[37] !== i || e[38] !== f || e[39] !== u || e[40] !== c ? (D = c === "menu" && i && /* @__PURE__ */ p.jsx("div", { className: de("SpeedMenu"), children: u.map(($) => /* @__PURE__ */ p.jsxs("button", { className: de("SpeedOption", {
     active: $ === f
@@ -1587,7 +1587,7 @@ const Mn = "_TimeDisplay_1m48s_2", Dn = {
     i
   ] }), e[10] = u, e[11] = h, e[12] = i, e[13] = m) : m = e[13], m;
 }, Hn = Object.assign({}, {
-  Button: Ce,
+  Button: ke,
   ProgressBar: gn,
   VolumeControl: wn,
   SpeedControl: En,
@@ -1613,11 +1613,11 @@ const Mn = "_TimeDisplay_1m48s_2", Dn = {
     overlayClickAction: V,
     loadingText: N,
     errorTitle: w,
-    errorDescription: k,
-    errorRetry: C,
+    errorDescription: C,
+    errorRetry: k,
     controllerRef: x,
     children: L
-  } = t, T = _.useContext(me);
+  } = t, T = _.use(me);
   let S, j;
   e[0] !== x || e[1] !== T ? (S = () => {
     if (!x)
@@ -1663,7 +1663,7 @@ const Mn = "_TimeDisplay_1m48s_2", Dn = {
   e[4] !== E || e[5] !== L ? (D = /* @__PURE__ */ p.jsx(Te, { value: E, children: L }), e[4] = E, e[5] = L, e[6] = D) : D = e[6];
   const H = D;
   let $;
-  e[7] !== m || e[8] !== b || e[9] !== v || e[10] !== h || e[11] !== k || e[12] !== C || e[13] !== w || e[14] !== u || e[15] !== l || e[16] !== N || e[17] !== y || e[18] !== V || e[19] !== f || e[20] !== c || e[21] !== d || e[22] !== o || e[23] !== i || e[24] !== r ? ($ = Object.fromEntries(Object.entries({
+  e[7] !== m || e[8] !== b || e[9] !== v || e[10] !== h || e[11] !== C || e[12] !== k || e[13] !== w || e[14] !== u || e[15] !== l || e[16] !== N || e[17] !== y || e[18] !== V || e[19] !== f || e[20] !== c || e[21] !== d || e[22] !== o || e[23] !== i || e[24] !== r ? ($ = Object.fromEntries(Object.entries({
     width: r,
     height: l,
     src: o,
@@ -1680,9 +1680,9 @@ const Mn = "_TimeDisplay_1m48s_2", Dn = {
     overlayClickAction: V,
     loadingText: N,
     errorTitle: w,
-    errorDescription: k,
-    errorRetry: C
-  }).filter(Un)), e[7] = m, e[8] = b, e[9] = v, e[10] = h, e[11] = k, e[12] = C, e[13] = w, e[14] = u, e[15] = l, e[16] = N, e[17] = y, e[18] = V, e[19] = f, e[20] = c, e[21] = d, e[22] = o, e[23] = i, e[24] = r, e[25] = $) : $ = e[25];
+    errorDescription: C,
+    errorRetry: k
+  }).filter(Un)), e[7] = m, e[8] = b, e[9] = v, e[10] = h, e[11] = C, e[12] = k, e[13] = w, e[14] = u, e[15] = l, e[16] = N, e[17] = y, e[18] = V, e[19] = f, e[20] = c, e[21] = d, e[22] = o, e[23] = i, e[24] = r, e[25] = $) : $ = e[25];
   const O = $;
   let K, g;
   if (e[26] !== O || e[27] !== T ? (K = () => {
@@ -1706,7 +1706,7 @@ const Mn = "_TimeDisplay_1m48s_2", Dn = {
   }, g = [T, O], e[26] = O, e[27] = T, e[28] = K, e[29] = g) : (K = e[28], g = e[29]), _.useLayoutEffect(K, g), T)
     return H;
   let A;
-  return e[30] !== m || e[31] !== b || e[32] !== v || e[33] !== H || e[34] !== x || e[35] !== h || e[36] !== k || e[37] !== C || e[38] !== w || e[39] !== u || e[40] !== l || e[41] !== a || e[42] !== N || e[43] !== y || e[44] !== V || e[45] !== f || e[46] !== c || e[47] !== d || e[48] !== o || e[49] !== n || e[50] !== i || e[51] !== r ? (A = /* @__PURE__ */ p.jsx(Be, { storeConfig: n, width: r, height: l, src: o, sources: c, speedOptions: d, playerOptions: f, events: u, disableVideoJsStyles: h, tracks: i, initialActiveCaptionLang: a, activeCaptionLang: m, onCaptionLangChange: y, autoHide: b, autoHideDelayMs: v, overlayClickAction: V, loadingText: N, errorTitle: w, errorDescription: k, errorRetry: C, controllerRef: x, children: H }), e[30] = m, e[31] = b, e[32] = v, e[33] = H, e[34] = x, e[35] = h, e[36] = k, e[37] = C, e[38] = w, e[39] = u, e[40] = l, e[41] = a, e[42] = N, e[43] = y, e[44] = V, e[45] = f, e[46] = c, e[47] = d, e[48] = o, e[49] = n, e[50] = i, e[51] = r, e[52] = A) : A = e[52], A;
+  return e[30] !== m || e[31] !== b || e[32] !== v || e[33] !== H || e[34] !== x || e[35] !== h || e[36] !== C || e[37] !== k || e[38] !== w || e[39] !== u || e[40] !== l || e[41] !== a || e[42] !== N || e[43] !== y || e[44] !== V || e[45] !== f || e[46] !== c || e[47] !== d || e[48] !== o || e[49] !== n || e[50] !== i || e[51] !== r ? (A = /* @__PURE__ */ p.jsx(Be, { storeConfig: n, width: r, height: l, src: o, sources: c, speedOptions: d, playerOptions: f, events: u, disableVideoJsStyles: h, tracks: i, initialActiveCaptionLang: a, activeCaptionLang: m, onCaptionLangChange: y, autoHide: b, autoHideDelayMs: v, overlayClickAction: V, loadingText: N, errorTitle: w, errorDescription: C, errorRetry: k, controllerRef: x, children: H }), e[30] = m, e[31] = b, e[32] = v, e[33] = H, e[34] = x, e[35] = h, e[36] = C, e[37] = k, e[38] = w, e[39] = u, e[40] = l, e[41] = a, e[42] = N, e[43] = y, e[44] = V, e[45] = f, e[46] = c, e[47] = d, e[48] = o, e[49] = n, e[50] = i, e[51] = r, e[52] = A) : A = e[52], A;
 };
 Fe.displayName = "VideoPlayer.Root";
 const Qn = Object.assign({

package/docs/subpath-imports.md

@@ -0,0 +1,80 @@
+# `@weing-dev/ui-kit-primitive` 서브패스 import 가이드
+
+외부 프로젝트에서 **번들 크기와 의존성 로딩**을 줄이려면, 가능하면 루트 엔트리(`@weing-dev/ui-kit-primitive`) 대신 **`package.json`의 `exports`에 정의된 서브패스**로 import 하는 것을 권장합니다. 서브패스별로 별도의 JS 번들이 만들어져, 번들러가 사용하는 경로만 당기게 할 수 있습니다.
+
+## 요약표: 컴포넌트 · 심벌 → 권장 서브패스
+
+| 권장 import 경로 | 포함 컴포넌트 / 주요 심벌 |
+| --- | --- |
+| `@weing-dev/ui-kit-primitive/icon` | `Icon`, `IconProvider`, `ICON_NAMES`, 아이콘 관련 타입 |
+| `@weing-dev/ui-kit-primitive/chart` | `Chart` |
+| `@weing-dev/ui-kit-primitive/editor` | `Editor` 및 Editor 관련 타입 (`EditorProps`, 툴바 타입 등) |
+| `@weing-dev/ui-kit-primitive/video-player` | `VideoPlayer`, 자막·유틸 심벌(`convertSrtToVtt` 등), VideoPlayer 관련 타입 |
+| `@weing-dev/ui-kit-primitive/table` | `Table`, `TableRootProps` |
+| `@weing-dev/ui-kit-primitive/calendar` | `Calendar`, `CalendarContext`, `ScrollCalendar`, `ScrollCalendarContext`, `WeeklyCalendar`, `WeeklyCalendarContext` 및 해당 컨텍스트 타입 |
+| `@weing-dev/ui-kit-primitive/form` | `Button`, `HelperText`, `Cascader`, `CheckBox`, `Dropdown`, `OTPInput`, `Switch`, `Radio`, `TextInput`, `TextArea`, `MobilePicker`, `Slider`, `Stepper`, `TimeInput` 및 `CascaderOption`, `StepperProviderProps` |
+| `@weing-dev/ui-kit-primitive/navigation` | `Accordion`, `Breadcrumb`, `List`, `LNB`, `makeNavigation`, `Pagination`, `ScrollSpy`, `Tab` 및 `LNB` 관련 타입 |
+| `@weing-dev/ui-kit-primitive/feedback` | `Modal`, `Popup`, `Sheet` 및 `PopupRootProps`, `SheetRootProps` |
+| `@weing-dev/ui-kit-primitive/display` | `Avatar`, `Badge`, `BarCode`, `Chips`, `Comment`, `Divider`, `Label`, `LazyImage`, `QRCode`, `Thumbnail` 및 해당 타입 |
+
+## 루트 엔트리 `@weing-dev/ui-kit-primitive`
+
+- **역할**: `src/index.ts` → `entry/components` 및 `entry/types`의 **전체 재수출**(글로벌 SCSS 포함).
+- **언제 쓰나**: 빠른 프로토타입, 내부 앱처럼 전체를 통째로 써도 될 때.
+- **주의**: 차트·에디터·비디오·테이블 등 무거운 peer dependency가 필요한 코드까지 한 줄로 끌어올 가능성이 있어, 프로덕션 외부 연동에서는 **위 서브패스를 우선**하는 편이 안전합니다.
+
+## 스타일(CSS) 서브패스
+
+| 경로 | 용도 |
+| --- | --- |
+| `@weing-dev/ui-kit-primitive/index.css` | 킷 기본 번들 스타일(메인 라이브러리 빌드 산출물) |
+| `@weing-dev/ui-kit-primitive/editor/style.css` | Quill 에디터(`Editor`)용 — **별도 로드**(peer: `quill` 등과 함께) |
+| `@weing-dev/ui-kit-primitive/video-player/style.css` | Video.js 플레이어용 — **별도 로드**(peer: `video.js`) |
+
+에디터/비디오를 쓰는 화면에서는 대응하는 JS 서브패스(`./editor`, `./video-player`)와 함께 위 CSS도 import 해야 레이아웃이 깨지지 않습니다.
+
+## 타입 및 augmentation
+
+- 공통 타입: 루트에서 `export * from "./entry/types"` 로 노출됩니다. 서브패스 엔트리 파일(`src/entry/*.ts`)에서 `export type` 한 항목은 해당 서브패스에서도 이용할 수 있습니다.
+- `__UiKitAugmentations`: 루트에서 타입만 export — styled-components 등 **모듈 보강**이 필요하면 루트에서 타입 import 를 유지하면 됩니다(런타임 코드는 해당 서브패스에서).
+
+## `ICON_NAMES`만 있는 경우
+
+- `ICON_NAMES`와 `IconName` 등 **아이콘 이름/레지스트리 타입**은 **`@weing-dev/ui-kit-primitive/icon`** 에서만 정식으로 재수출합니다. 루트 `entry/components.ts` 에는 포함되어 있지 않습니다.
+
+## 모노레포 내 다른 패키지 exports
+
+현재 레포 기준으로 **서브패스가 풍부한 공개 패키지는 `@weing-dev/ui-kit-primitive` 뿐**입니다.
+
+| 패키지 | exports |
+| --- | --- |
+| `@weing-dev/ui-kit` | `.`, `./index.css` |
+| `@weing-dev/ui-kit-extension` | `.`, `./index.css` |
+| `@weing-dev/shell-router` | `.` |
+
+외부에서 “경로별로 나눠 쓰기”가 필요하면 **primitive의 위 표**를 기준으로 하면 됩니다.
+
+## import 예시
+
+```ts
+// 아이콘만 — Chart/Editor 번들 미포함 권장
+import { Icon, ICON_NAMES } from "@weing-dev/ui-kit-primitive/icon";
+
+// 폼 위주 화면
+import { Button, TextInput } from "@weing-dev/ui-kit-primitive/form";
+
+// 차트만 (named export)
+import { Chart } from "@weing-dev/ui-kit-primitive/chart";
+
+// 에디터 + 스타일
+import { Editor } from "@weing-dev/ui-kit-primitive/editor";
+import "@weing-dev/ui-kit-primitive/editor/style.css";
+
+// 동일 카테고리는 한 서브패스로 통일하면 중복 청크를 줄이기 쉽습니다.
+```
+
+## 참조
+
+- 서브패스 목록 및 해상도: 패키지 루트의 `package.json` → 필드 **`exports`**.
+- 각 서브패스가 무엇을 내보내는지: `packages/ui-kit-primitive/src/entry/*.ts`.
+- 빌드 분할: 메인 라이브러리는 `vite.config.ts`, 서브패스 청크는 `vite.icon.config.ts`(이름만 icon이지만 chart·form 등 전 엔트리 포함).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weing-dev/ui-kit-primitive",
   "private": false,
-  "version": "0.4.6",
+  "version": "0.5.0",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -59,7 +59,8 @@
   "types": "./dist/index.d.ts",
   "main": "./dist/index.umd.cjs",
   "files": [
-    "dist"
+    "dist",
+    "docs/subpath-imports.md"
   ],
   "peerDependencies": {
     "@aws-sdk/client-s3": "^3.717.0",

package/dist/components/Chart/Chart.d.ts

@@ -1,19 +0,0 @@
-import { ChartData } from 'chart.js';
-type LineChartData = ChartData<"line">;
-type BarChartData = ChartData<"bar">;
-type BubbleChartData = ChartData<"bubble">;
-type DoughnutChartData = ChartData<"doughnut">;
-type PieChartData = ChartData<"pie">;
-type PolarAreaChartData = ChartData<"polarArea">;
-type RadarChartData = ChartData<"radar">;
-type ScatterChartData = ChartData<"scatter">;
-type FunnelChartData = ChartData;
-type ChartType = {
-    type: "line" | "bar" | "bubble" | "doughnut" | "pie" | "polarArea" | "radar" | "scatter" | "funnel";
-    data: LineChartData | BarChartData | BubbleChartData | DoughnutChartData | PieChartData | PolarAreaChartData | RadarChartData | ScatterChartData | FunnelChartData;
-    options?: object;
-    width?: number;
-    height?: number;
-};
-declare const Chart: (props: ChartType) => import("react/jsx-runtime").JSX.Element;
-export default Chart;