@weing-dev/ui-kit-primitive 0.2.0 → 0.3.0

package/dist/components/Icon/Icon.constant.d.ts

@@ -3,4 +3,4 @@
  * 이 파일은 scripts/icons/generate-icon-names.cjs 로 생성됩니다.
  * Icons/index.ts 를 수정한 뒤 pnpm build 전에 이 스크립트를 실행하세요.
  */
-export declare const ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "Play", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];
+export declare const ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "PictureQuality", "Pip", "PipExit", "Play", "PlaybackSpeed", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SubtitleFilled", "SubtitleOutlined", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];

package/dist/components/Icon/Icon.d.ts

@@ -11,6 +11,6 @@ export type StrictIconProps = IconBaseProps & {
 };
 declare function IconComponent(props: StrictIconProps): import("react/jsx-runtime").JSX.Element;
 export declare const Icon: typeof IconComponent & {
-    ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "Play", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];
+    ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "PictureQuality", "Pip", "PipExit", "Play", "PlaybackSpeed", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SubtitleFilled", "SubtitleOutlined", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];
 };
 export {};

package/dist/components/Icons/PictureQuality.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgPictureQuality: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgPictureQuality;

package/dist/components/Icons/Pip.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgPip: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgPip;

package/dist/components/Icons/PipExit.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgPipExit: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgPipExit;

package/dist/components/Icons/PlaybackSpeed.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgPlaybackSpeed: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgPlaybackSpeed;

package/dist/components/Icons/SubtitleFilled.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgSubtitleFilled: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSubtitleFilled;

package/dist/components/Icons/SubtitleOutlined.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgSubtitleOutlined: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSubtitleOutlined;

package/dist/components/Icons/index.d.ts

@@ -85,7 +85,11 @@ export { default as PersonAddAlt } from './PersonAddAlt';
 export { default as Personcard } from './Personcard';
 export { default as PersonFilled } from './PersonFilled';
 export { default as PersonOutline } from './PersonOutline';
+export { default as PictureQuality } from './PictureQuality';
+export { default as Pip } from './Pip';
+export { default as PipExit } from './PipExit';
 export { default as Play } from './Play';
+export { default as PlaybackSpeed } from './PlaybackSpeed';
 export { default as PrintInactive } from './PrintInactive';
 export { default as PrintPlay } from './PrintPlay';
 export { default as Product } from './Product';
@@ -96,6 +100,8 @@ export { default as SettingFilled } from './SettingFilled';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as ShippingDone } from './ShippingDone';
+export { default as SubtitleFilled } from './SubtitleFilled';
+export { default as SubtitleOutlined } from './SubtitleOutlined';
 export { default as SupportAgent } from './SupportAgent';
 export { default as SwapVert } from './SwapVert';
 export { default as Task } from './Task';

package/dist/components/VideoPlayer/VideoPlayer.d.ts

@@ -1,118 +1,125 @@
 import { default as React } from 'react';
-import { default as videojs } from 'video.js';
-import { VideoOverlay, Loading, Error, Frame, Widgets } from './components';
-import { VideoPlayerStoreContext, VideoPlayerImageContext, VideoPlayerProvider, useVideoPlayerStore, useVideoPlayerShallow, useVideoPlayerImage, createVideoPlayerStore, resolveVideoPlayerStoreConfig, VideoPlayerImageComponent, VideoPlayerStoreConfig } from './context';
-import { IconName } from '../Icon/Icon';
-type VideoJsPlayer = ReturnType<typeof videojs>;
-type VideoJsOptions = Parameters<typeof videojs>[1];
-export type VideoPlayerControls = {
-    back?: boolean;
-    share?: boolean;
-    playPause?: boolean;
-    progress?: boolean;
-    time?: boolean;
-    volume?: boolean;
-    speed?: boolean;
-    fullscreen?: boolean;
-};
-export type VideoPlayerTexts = {
-    loading?: string;
-    errorTitle?: string;
-    errorDescription?: string;
-    errorRetry?: string;
-};
-export type VideoPlayerAria = {
-    progress?: string;
-    play?: string;
-    pause?: string;
-    fullscreenEnter?: string;
-    fullscreenExit?: string;
-    speed?: string;
-    mute?: string;
-    unmute?: string;
-    back?: string;
-    share?: string;
-};
-export type VideoPlayerIcons = {
-    play?: IconName | string;
-    pause?: IconName | string;
-    back?: IconName | string;
-    share?: IconName | string;
-    volumeOn?: IconName | string;
-    volumeOff?: IconName | string;
-    fullscreenEnter?: IconName | string;
-    fullscreenExit?: IconName | string;
-};
-export type VideoPlayerEvents = {
-    onReady?: (player: VideoJsPlayer) => void;
-    onLoadStart?: () => void;
-    onCanPlay?: () => void;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onProgress?: (buffered: number) => void;
-    onVolumeChange?: (volume: number) => void;
-    onRateChange?: (rate: number) => void;
-    onFullscreenChange?: (isFullscreen: boolean) => void;
-    onDurationChange?: (duration: number) => void;
-    onError?: (error: unknown) => void;
-};
-export type VideoPlayerProps = {
-    src: string;
-    poster?: string;
-    className?: string;
-    width?: string | number;
-    height?: string | number;
-    onBack?: () => void;
-    onShare?: () => void;
-    onRetry?: () => void;
-    controls?: VideoPlayerControls;
-    texts?: VideoPlayerTexts;
-    aria?: VideoPlayerAria;
-    icons?: VideoPlayerIcons;
-    events?: VideoPlayerEvents;
-    overlayClassName?: string;
-    overlay?: {
-        autoHide?: boolean;
-        autoHideDelayMs?: number;
-        overlayClickAction?: "toggle-play" | "none";
-        onOverlayClick?: () => void;
-    };
-    playerOptions?: VideoJsOptions;
-    sources?: {
-        src: string;
-        type: string;
-    }[];
-    speedOptions?: number[];
-    disableVideoJsStyles?: boolean;
-    controlVariants?: {
-        speed?: "menu" | "cycle";
-    };
+import { VideoOverlay, Loading, Error, Frame, Player, Thumbnail, Widgets } from './components';
+import { VideoPlayerStoreContext, VideoPlayerImageContext, DefaultImage, VideoPlayerProvider, useVideoPlayerStore, useVideoPlayerShallow, useVideoPlayerImage, createVideoPlayerStore, resolveVideoPlayerStoreConfig, VideoPlayerImageComponent, VideoPlayerProviderProps } from './context';
+import { VIDEO_PLAYER_DEFAULTS } from './videoPlayer.constants';
+import { convertSrtToVtt, isSrtSubtitleSource, parseWebVttToCues } from './VideoPlayer.utils';
+/**
+ * `VideoPlayer.Root` props. `VideoPlayerProviderProps`와 같으나 `children`은 선택이고,
+ * 썸네일에 쓸 커스텀 이미지 컴포넌트를 `Image`로 넘길 수 있다.
+ */
+export type RootProps = Omit<VideoPlayerProviderProps, "children"> & {
     children?: React.ReactNode;
-    storeConfig?: VideoPlayerStoreConfig;
+    /** 썸네일·포스터 렌더에 사용. 미지정 시 HTML `img` 기본 구현 */
     Image?: VideoPlayerImageComponent;
 };
-export type RootProps = VideoPlayerProps & React.JSX.IntrinsicElements["div"];
 declare const Root: {
     (props: RootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * `VideoPlayer` 기본 export 객체의 타입.
+ * 컴파운드 컴포넌트, 훅, Context, 스토어 팩토리, 기본 상수, 자막 유틸을 한곳에서 접근한다.
+ */
 interface IVideoPlayer {
+    /**
+     * 플레이어 루트. 스토어(Provider)·레이아웃·자막·이벤트 등 초기 설정을 넘기고, 하위에 `Frame`·`Player`·`Overlay`를 조립한다.
+     * `children`만 비우면 UI가 렌더되지 않는다.
+     */
     Root: typeof Root;
+    /**
+     * 플레이어 영역 래퍼. Root의 `width`/`height`를 CSS 변수로 반영한다.
+     */
     Frame: typeof Frame;
+    /**
+     * `<video>`와 Video.js 인스턴스를 마운트한다. 소스·옵션·이벤트는 스토어(Root가 넣은 값)를 읽는다.
+     */
+    Player: typeof Player;
+    /**
+     * 재생 전·`currentTime === 0`일 때만 보이는 포스터(썸네일) 레이어. Root의 `Image` 슬롯으로 그린다.
+     */
+    Thumbnail: typeof Thumbnail;
+    /**
+     * 오버레이 루트. children은 렌더 프롭으로 `onMouseMove`·`showControls` 등을 받는다. `Overlay.Grid`와 9개 슬롯을 제공한다.
+     */
     Overlay: typeof VideoOverlay;
+    /**
+     * 로딩 오버레이. 스토어 `isLoading`이 true일 때만 표시된다.
+     */
     Loading: typeof Loading;
+    /**
+     * 에러 오버레이. 스토어 `hasError`가 true일 때만 표시된다.
+     */
     Error: typeof Error;
+    /**
+     * 컨트롤 위젯 묶음 (`Button`, `ProgressBar`, `VolumeControl`, `SpeedControl`, `Time`).
+     */
     Widgets: typeof Widgets;
+    /**
+     * Zustand 스토어에서 값을 구독한다. 반드시 Provider(`Root` 또는 `VideoPlayerProvider`) 하위에서 호출한다.
+     */
     useVideoPlayerStore: typeof useVideoPlayerStore;
+    /**
+     * 스토어에서 여러 필드를 얕게(shallow) 골라온다. 키 배열 또는 selector 함수를 넘길 수 있다.
+     */
     useVideoPlayerShallow: typeof useVideoPlayerShallow;
+    /**
+     * Root에 주입한 `Image` 컴포넌트 타입을 반환한다. `Thumbnail`이 이 구현으로 렌더된다.
+     */
     useVideoPlayerImage: typeof useVideoPlayerImage;
+    /**
+     * VideoPlayer Zustand 스토어용 React Context.
+     */
     VideoPlayerStoreContext: typeof VideoPlayerStoreContext;
+    /**
+     * 썸네일용 이미지 컴포넌트를 담는 Context.
+     */
     VideoPlayerImageContext: typeof VideoPlayerImageContext;
+    /**
+     * 스토어 Provider. `Root` 없이 커스텀 트리에 직접 감쌀 때 사용한다.
+     */
     VideoPlayerProvider: typeof VideoPlayerProvider;
+    /**
+     * Zustand 스토어 인스턴스를 생성한다. 고급 통합·테스트용.
+     */
     createVideoPlayerStore: typeof createVideoPlayerStore;
+    /**
+     * `storeConfig` 부분 객체를 패키지 기본값과 병합해 완전한 설정 객체로 만든다.
+     */
     resolveVideoPlayerStoreConfig: typeof resolveVideoPlayerStoreConfig;
+    /**
+     * 레이아웃·오버레이·볼륨·배속·문구·aria·아이콘 이름 등 패키지 기본 상수.
+     */
+    VIDEO_PLAYER_DEFAULTS: typeof VIDEO_PLAYER_DEFAULTS;
+    /**
+     * 기본 썸네일 이미지 구현(HTML `<img>`). Root `Image` 미지정 시 사용된다.
+     */
+    DefaultImage: typeof DefaultImage;
+    /**
+     * SRT 자막 텍스트를 WebVTT 텍스트로 변환한다.
+     *
+     * - 줄바꿈을 `\n`으로 정규화
+     * - 타임스탬프 구분자 `,`를 `.`으로 변환
+     * - 가능한 경우 cue id/설정 정보를 보존
+     *
+     * @param srt - 원본 SRT 문자열
+     * @returns `WEBVTT` 헤더가 포함된 VTT 문자열
+     */
+    convertSrtToVtt: typeof convertSrtToVtt;
+    /**
+     * 자막 URL/경로가 SRT 파일인지 판별한다.
+     *
+     * @param src - 자막 리소스 경로 또는 URL
+     * @returns `.srt` 확장자면 `true`
+     */
+    isSrtSubtitleSource: typeof isSrtSubtitleSource;
+    /**
+     * WebVTT 문자열을 파싱해 cue 배열로 반환한다 (간단한 파서; 복잡한 설정 라인은 무시).
+     *
+     * @param input - 전체 WebVTT 문자열
+     * @returns `{ start, end, text }[]` (초 단위 구간)
+     */
+    parseWebVttToCues: typeof parseWebVttToCues;
 }
-export type { RootProps as VideoPlayerRootProps };
+export type { IVideoPlayer, RootProps as VideoPlayerRootProps };
 declare const VideoPlayer: IVideoPlayer;
 export default VideoPlayer;

package/dist/components/VideoPlayer/VideoPlayer.utils.d.ts

@@ -0,0 +1,45 @@
+import { VideoJsPlayer, VideoPlayerState } from './context/videoPlayer.types';
+/**
+ * Video.js HTML5 tech에서 루트 `<video>` 요소를 가져온다.
+ */
+export declare const getHtmlVideoElementFromVideoJs: (player: VideoJsPlayer) => HTMLVideoElement | null;
+/** WebVTT cue 한 개 (초 단위 구간) */
+export type VttCue = {
+    start: number;
+    end: number;
+    text: string;
+};
+/**
+ * WebVTT 문자열을 파싱해 cue 배열로 반환한다 (간단한 파서; 복잡한 설정 라인은 무시).
+ */
+export declare const parseWebVttToCues: (input: string) => VttCue[];
+/**
+ * SRT 자막 텍스트를 WebVTT 텍스트로 변환한다.
+ *
+ * - 줄바꿈을 `\n`으로 정규화
+ * - 타임스탬프 구분자 `,`를 `.`으로 변환
+ * - 가능한 경우 cue id/설정 정보를 보존
+ *
+ * @param srt - 원본 SRT 문자열
+ * @returns `WEBVTT` 헤더가 포함된 VTT 문자열
+ */
+export declare const convertSrtToVtt: (srt: string) => string;
+/**
+ * 자막 URL/경로가 SRT 파일인지 판별한다.
+ *
+ * @param src - 자막 리소스 경로 또는 URL
+ * @returns `.srt` 확장자면 `true`
+ */
+export declare const isSrtSubtitleSource: (src: string) => boolean;
+/**
+ * SRT 문자열을 VTT Blob URL로 변환해 브라우저 `track.src`에 바로 연결할 수 있게 만든다.
+ *
+ * @param srt - 원본 SRT 문자열
+ * @returns `URL.revokeObjectURL`로 해제가 필요한 Blob URL
+ */
+export declare const createVttBlobUrlFromSrt: (srt: string) => string;
+/**
+ * 스토어에 반영되는 `src` / `sources` 업데이트가 실제 미디어 소스 전환인지 판별한다.
+ * (썸네일만 바뀐 경우는 false)
+ */
+export declare const isMediaSourceChange: (previous: Pick<VideoPlayerState, "src" | "sources">, updates: Partial<VideoPlayerState>) => boolean;

package/dist/components/VideoPlayer/components/Error/Error.d.ts

@@ -8,9 +8,6 @@ type ErrorAsProps = {
 };
 type ErrorProps = {
     className?: string;
-    errorTitle?: string;
-    errorDescription?: string;
-    errorRetry?: string;
     onRetry?: () => void;
     as?: (props: ErrorAsProps) => React.ReactNode;
 };

package/dist/components/VideoPlayer/components/Frame/Frame.d.ts

@@ -1,34 +1,6 @@
 import { default as React } from 'react';
-import { default as videojs } from 'video.js';
-type VideoJsPlayer = ReturnType<typeof videojs>;
-type VideoJsOptions = Parameters<typeof videojs>[1];
 export type FrameProps = {
-    src: string;
-    poster?: string;
     className?: string;
-    width?: string | number;
-    height?: string | number;
-    playerOptions?: VideoJsOptions;
-    sources?: {
-        src: string;
-        type: string;
-    }[];
-    speedOptions?: number[];
-    disableVideoJsStyles?: boolean;
-    events?: {
-        onReady?: (player: VideoJsPlayer) => void;
-        onLoadStart?: () => void;
-        onCanPlay?: () => void;
-        onPlay?: () => void;
-        onPause?: () => void;
-        onTimeUpdate?: (currentTime: number) => void;
-        onProgress?: (buffered: number) => void;
-        onVolumeChange?: (volume: number) => void;
-        onRateChange?: (rate: number) => void;
-        onFullscreenChange?: (isFullscreen: boolean) => void;
-        onDurationChange?: (duration: number) => void;
-        onError?: (error: unknown) => void;
-    };
 } & React.JSX.IntrinsicElements["div"];
 declare const Frame: (props: FrameProps) => import("react/jsx-runtime").JSX.Element;
 export default Frame;

package/dist/components/VideoPlayer/components/Loading/Loading.d.ts

@@ -5,7 +5,6 @@ type LoadingAsProps = {
 };
 type LoadingProps = {
     className?: string;
-    loadingText?: string;
     as?: (props: LoadingAsProps) => React.ReactNode;
 };
 declare const Loading: (props: LoadingProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VideoPlayer/components/Player/Player.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export type PlayerProps = {
+    className?: string;
+} & React.JSX.IntrinsicElements["video"];
+declare const Player: (props: PlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default Player;

package/dist/components/VideoPlayer/components/Player/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Player';
+export type { PlayerProps } from './Player';

package/dist/components/VideoPlayer/components/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type ThumbnailProps = {
+    src: string;
+    alt?: string;
+    className?: string;
+} & React.JSX.IntrinsicElements["div"];
+declare const Thumbnail: (props: ThumbnailProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Thumbnail;

package/dist/components/VideoPlayer/components/Thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Thumbnail';
+export type { ThumbnailProps } from './Thumbnail';

package/dist/components/VideoPlayer/components/VideoOverlay/VideoOverlay.d.ts

@@ -13,12 +13,10 @@ export type VideoOverlayRenderProps = {
     onMouseLeave: () => void;
     onClick: (event: React.MouseEvent<Element>) => void;
     isFullscreen: boolean;
+    isPictureInPicture: boolean;
 };
 export type VideoOverlayProps = {
     className?: string;
-    autoHide?: boolean;
-    autoHideDelayMs?: number;
-    overlayClickAction?: "toggle-play" | "none";
     onOverlayClick?: () => void;
     children: (props: VideoOverlayRenderProps) => React.ReactNode;
 };

package/dist/components/VideoPlayer/components/Widgets/Button/Button.d.ts

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
 import { Icon } from '../../../../Icon/Icon';
 export type ButtonProps = {
-    /** Icon 컴포넌트에 전달할 props (name 필수, size·color 등 선택) */
-    icon: React.ComponentProps<typeof Icon>;
+    /** Icon 컴포넌트에 전달할 props (name 필수, size·color 등 선택). children이 있으면 무시됨. */
+    icon?: React.ComponentProps<typeof Icon>;
+    /** 아이콘 대신 렌더할 내용 (예: SpeedControl의 "1x" 텍스트) */
+    children?: React.ReactNode;
     onClick?: () => void;
     ariaLabel?: string;
     className?: string;

package/dist/components/VideoPlayer/components/Widgets/SpeedControl/SpeedControl.d.ts

@@ -14,7 +14,6 @@ type SpeedControlAsProps = {
 type SpeedControlProps = {
     className?: string;
     variant?: "menu" | "cycle";
-    speedOptions?: number[];
     ariaLabel?: string;
     as?: (props: SpeedControlAsProps) => React.ReactNode;
 };

package/dist/components/VideoPlayer/components/Widgets/VolumeControl/VolumeControl.d.ts

@@ -1,5 +1,7 @@
 import { default as React } from 'react';
-import { IconName } from '../../../../Icon/Icon';
+import { IconName, StrictIconProps } from '../../../../Icon/Icon';
+/** 아이콘: 이름만 주거나, name + 기타 Icon props 객체 */
+type VolumeIconProp = IconName | (Pick<StrictIconProps, "name"> & Partial<Omit<StrictIconProps, "name">>);
 type VolumeControlAsProps = {
     defaultClassName: string;
     volume: number;
@@ -12,8 +14,6 @@ type VolumeControlAsProps = {
     sliderVisible: boolean;
     sliderValue: number;
     onSliderFocus: (focused: boolean) => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
     onPointerDown: (event: React.PointerEvent<Element>) => void;
     trackRef: React.RefObject<HTMLDivElement | null>;
 };
@@ -21,8 +21,8 @@ export type VolumeControlProps = {
     className?: string;
     onInteractionChange?: (isActive: boolean) => void;
     icons?: {
-        volumeOn?: IconName;
-        volumeOff?: IconName;
+        volumeOn?: VolumeIconProp;
+        volumeOff?: VolumeIconProp;
     };
     aria?: {
         mute?: string;

package/dist/components/VideoPlayer/components/Widgets/index.d.ts

@@ -5,7 +5,6 @@ export declare const Widgets: {
     SpeedControl: (props: {
         className?: string;
         variant?: "menu" | "cycle";
-        speedOptions?: number[];
         ariaLabel?: string;
         as?: (props: {
             defaultClassName: string;

package/dist/components/VideoPlayer/components/index.d.ts

@@ -2,5 +2,9 @@ export { default as VideoOverlay } from './VideoOverlay';
 export { default as Loading } from './Loading';
 export { default as Error } from './Error';
 export { default as Frame } from './Frame';
+export { default as Player } from './Player';
+export { default as Thumbnail } from './Thumbnail';
 export { Widgets } from './Widgets';
 export type { ButtonProps } from './Widgets';
+export type { PlayerProps } from './Player';
+export type { ThumbnailProps } from './Thumbnail';

package/dist/components/VideoPlayer/context/index.d.ts

@@ -1,3 +1,4 @@
-export { useVideoPlayerStore, useVideoPlayerShallow, VideoPlayerStoreContext, VideoPlayerImageContext, useVideoPlayerImage, DefaultImage, type VideoPlayerStoreApi, type VideoPlayerImageComponent, type VideoPlayerImageProps, } from './videoPlayer.context';
+export { useVideoPlayerStore, useVideoPlayerShallow, VideoPlayerStoreContext, VideoPlayerImageContext, useVideoPlayerImage, DefaultImage, type VideoPlayerStoreApi, } from './videoPlayer.context';
 export { default as VideoPlayerProvider } from './videoPlayer.provider';
-export { createVideoPlayerStore, resolveVideoPlayerStoreConfig, type VideoPlayerStore, type VideoPlayerState, type VideoPlayerActions, type VideoPlayerStoreConfig, } from './videoPlayer.store';
+export { createVideoPlayerStore, resolveVideoPlayerStoreConfig, } from './videoPlayer.store';
+export type { VideoJsPlayer, VideoPlayerStoreConfig, VideoPlayerTextTrack, VideoPlayerEvents, VideoPlayerState, VideoPlayerActions, VideoPlayerStore, VideoPlayerExternalController, VideoPlayerImageProps, VideoPlayerImageComponent, VideoPlayerProviderProps, } from './videoPlayer.types';

package/dist/components/VideoPlayer/context/videoPlayer.context.d.ts

@@ -1,15 +1,12 @@
 import { default as React } from 'react';
-import { createVideoPlayerStore, VideoPlayerStore } from './videoPlayer.store';
+import { createVideoPlayerStore } from './videoPlayer.store';
+import { VideoPlayerStore, VideoPlayerImageProps, VideoPlayerImageComponent } from './videoPlayer.types';
+/**
+ * VideoPlayer 스토어 API 타입 (createVideoPlayerStore의 반환 타입)
+ */
 export type VideoPlayerStoreApi = ReturnType<typeof createVideoPlayerStore>;
+export type { VideoPlayerImageProps, VideoPlayerImageComponent };
 export declare const VideoPlayerStoreContext: React.Context<import('zustand').UseBoundStore<import('zustand').StoreApi<VideoPlayerStore>> | undefined>;
-export type VideoPlayerImageProps = {
-    src: string;
-    alt: string;
-    width?: number;
-    height?: number;
-    className?: string;
-};
-export type VideoPlayerImageComponent = React.ComponentType<VideoPlayerImageProps>;
 export declare const DefaultImage: (props: VideoPlayerImageProps) => import("react/jsx-runtime").JSX.Element;
 export declare const VideoPlayerImageContext: React.Context<VideoPlayerImageComponent>;
 export declare const useVideoPlayerImage: () => VideoPlayerImageComponent;

package/dist/components/VideoPlayer/context/videoPlayer.provider.d.ts

@@ -1,8 +1,3 @@
-import { default as React } from 'react';
-import { VideoPlayerStoreConfig } from './videoPlayer.store';
-type VideoPlayerProviderProps = {
-    children: React.ReactNode;
-    storeConfig?: Partial<VideoPlayerStoreConfig>;
-};
+import { VideoPlayerProviderProps } from './videoPlayer.types';
 declare const VideoPlayerProvider: (props: VideoPlayerProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default VideoPlayerProvider;

package/dist/components/VideoPlayer/context/videoPlayer.store.d.ts

@@ -1,45 +1,27 @@
+import { VideoPlayerStore, VideoPlayerStoreConfig, VideoPlayerEvents, VideoPlayerTextTrack } from './videoPlayer.types';
 import { default as videojs } from 'video.js';
-type VideoJsPlayer = ReturnType<typeof videojs>;
-export type VideoPlayerStoreConfig = {
-    volumePersist: boolean;
-    volumeStorageKey: string;
-    volumeFallback: number;
-    playbackRateDefault: number;
-};
-export type VideoPlayerState = {
-    isLoading: boolean;
-    hasError: boolean;
-    isPlaying: boolean;
-    currentTime: number;
-    duration: number;
-    buffered: number;
-    volume: number;
-    playbackRate: number;
-    isFullscreen: boolean;
-    isMuted: boolean;
-    previousVolume: number;
-    player: VideoJsPlayer | null;
-};
-export type VideoPlayerActions = {
-    setPlayer: (player: VideoJsPlayer | null) => void;
-    setLoading: (isLoading: boolean) => void;
-    setError: (hasError: boolean) => void;
-    setPlaying: (isPlaying: boolean) => void;
-    setCurrentTime: (currentTime: number) => void;
-    setDuration: (duration: number) => void;
-    setBuffered: (buffered: number) => void;
-    setVolume: (volume: number) => void;
-    setPlaybackRate: (playbackRate: number) => void;
-    setFullscreen: (isFullscreen: boolean) => void;
-    setMuted: (isMuted: boolean) => void;
-    handlePlayPause: () => void;
-    handleSeek: (time: number) => void;
-    handleVolumeChange: (volume: number) => void;
-    handleSpeedChange: (speed: number) => void;
-    handleFullscreenToggle: () => void;
-    handleMuteToggle: () => void;
-};
-export type VideoPlayerStore = VideoPlayerState & VideoPlayerActions;
 export declare const resolveVideoPlayerStoreConfig: (config?: Partial<VideoPlayerStoreConfig>) => VideoPlayerStoreConfig;
-export declare const createVideoPlayerStore: (config?: Partial<VideoPlayerStoreConfig>) => import('zustand').UseBoundStore<import('zustand').StoreApi<VideoPlayerStore>>;
-export {};
+export declare const createVideoPlayerStore: (config?: Partial<VideoPlayerStoreConfig>, videoProps?: {
+    width?: string | number;
+    height?: string | number;
+    src?: string;
+    sources?: {
+        src: string;
+        type: string;
+    }[];
+    speedOptions?: number[];
+    playerOptions?: Parameters<typeof videojs>[1];
+    events?: VideoPlayerEvents;
+    disableVideoJsStyles?: boolean;
+    tracks?: VideoPlayerTextTrack[];
+    initialActiveCaptionLang?: string | null;
+    activeCaptionLang?: string | null;
+    onCaptionLangChange?: (lang: string | null) => void;
+    autoHide?: boolean;
+    autoHideDelayMs?: number;
+    overlayClickAction?: "toggle-play" | "none";
+    loadingText?: string;
+    errorTitle?: string;
+    errorDescription?: string;
+    errorRetry?: string;
+}) => import('zustand').UseBoundStore<import('zustand').StoreApi<VideoPlayerStore>>;