@apple-pie/slice 0.1.36 → 0.1.37

package/dist/styles.css

@@ -105,7 +105,7 @@
 	--scroll-bar-hover-dark: rgba(255, 255, 255, 0.15);
 	--surface-primary-tint-light: #fcfcfc;
 	--surface-primary-tint-dark: #191e24;
-	--surface-shadow-soft-light: 0px 4px 24px #0339491a;
+	--surface-shadow-soft-light: 0px 4px 24px #0000007a;
 	--surface-shadow-soft-dark: 0px 4px 24px #0000007a;
 	--surface-shadow-strong-light: 0px 4px 64px #0339491a;
 	--surface-shadow-strong-dark: 0px 4px 64px #0000007a;
@@ -8530,3 +8530,151 @@ line {
 
 .UploadArea-module_l__KG9YN {
 }
+
+.Video-module_wrapper__a9iH8 {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: var(--video-width, 100%);
+	height: var(--video-height, auto);
+	border-radius: var(--video-border-radius, 16px);
+	border-width: var(--video-border-size, 0);
+	border-style: solid;
+	border-color: var(--video-border-color, transparent);
+	background-color: var(--video-bg-color, transparent);
+	outline: none;
+	overflow: hidden;
+}
+
+.Video-module_video__hxKME {
+	width: 100%;
+	height: 100%;
+	display: block;
+	object-fit: var(--video-object-fit, contain);
+}
+
+.Video-module_controls__X4yt6 {
+	position: absolute;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	flex-direction: column;
+	inset: 0;
+	pointer-events: var(--video-controls-pointer-events, none);
+	opacity: var(--video-controls-opacity, 0);
+	z-index: var(--elevation-float);
+	transition: opacity 0.25s ease-in-out;
+}
+
+.Video-module_controlsHeader__dD64- {
+	display: flex;
+	justify-content: space-between;
+	box-sizing: border-box;
+	align-items: center;
+	flex-direction: row;
+	gap: 24px;
+	width: 100%;
+	padding: 16px;
+}
+
+.Video-module_controlsFooter__qJNTa {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+	gap: 24px;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 16px;
+}
+
+.Video-module_controlsBody__2GbQz {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	width: 100%;
+	flex: 1;
+	padding: 16px;
+}
+
+.Video-module_right__UMhfW {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 8px;
+	border-radius: 100px;
+	background-color: var(--video-controls-bg-color, rgba(0, 0, 0, 0.5));
+	padding: 8px 16px 8px 8px;
+	box-sizing: border-box;
+}
+
+.Video-module_left__XC33m {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 8px;
+	border-radius: 100px;
+	background-color: var(--video-controls-bg-color, rgba(0, 0, 0, 0.5));
+	padding: 8px;
+	box-sizing: border-box;
+}
+
+.Video-module_progress__UTWtq {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 8px;
+	border-radius: 100px;
+	background-color: var(--video-controls-bg-color, rgba(0, 0, 0, 0.5));
+	padding: 8px 16px 8px 8px;
+	box-sizing: border-box;
+	width: 50%;
+}
+
+.VideoController-module_container__wNiGy {
+	position: fixed;
+	inset: 0;
+	overflow: hidden;
+	z-index: var(--elevation-confirm);
+	pointer-events: none;
+}
+
+.VideoController-module_box__a0PRD {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+	z-index: var(--elevation-confirm);
+	pointer-events: none;
+}
+
+.VideoController-module_wrapper__RhpUo {
+	position: absolute;
+	box-sizing: border-box;
+	left: var(--overlay-padding, 64px);
+	right: var(--overlay-padding, 64px);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 16px;
+	z-index: var(--elevation-confirm);
+	pointer-events: all;
+	visibility: var(--video-visibility, hidden);
+	border-radius: var(--video-border-radius, 16px);
+	overflow: visible;
+}
+
+.VideoController-module_video__9bS2L {
+	overflow: visible;
+	box-shadow: var(--surface-shadow-soft);
+	border-radius: var(--video-border-radius, 16px);
+}

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

@@ -57,6 +57,10 @@ export declare const SliceIcons: {
         readonly speakerMuted: "speaker muted";
         readonly speakerHigh: "speaker high";
         readonly speakerLow: "speaker low";
+        readonly play: "play";
+        readonly playCircle: "play circle";
+        readonly pause: "pause";
+        readonly pauseCircle: "pause circle";
     };
     readonly files: {
         readonly document: "document";
@@ -142,6 +146,7 @@ export declare const SliceIcons: {
         readonly sidebarSplit: "sidebar split";
         readonly keyboard: "keyboard";
         readonly x: "x";
+        readonly fullscreen: "fullscreen";
     };
 };
 export {};

package/dist/types/components/ToggleButton/_types.d.ts

@@ -13,7 +13,9 @@ export interface ToggleButtonProps {
     selected?: boolean;
     iconColor?: string;
     iconColorOn?: string;
+    iconColorHover?: string;
     bgColor?: string;
+    bgColorHover?: string;
     bgColorOn?: string;
     onChange?: (state: boolean) => void;
     onSelect?: () => void;

package/dist/types/components/Video/Video.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { PlayState, type VideoElement } from './_types';
+export declare const Video: React.NamedExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children?: React.ReactNode;
+    src?: string;
+    playing?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    playsInline?: boolean;
+    playRate?: number;
+    controls?: "default" | "simple" | "custom" | "none";
+    customControls?: import("./_types").CustomVideoControls;
+    poster?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+    borderSize?: number | string;
+    borderColor?: string;
+    backgroundColor?: string;
+    objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down";
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnd?: () => void;
+    onProgress?: (progress: number) => void;
+    onLoadProgress?: (progress: number) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onCanPlayThrough?: () => void;
+    onPlayStateChange?: (state: PlayState) => void;
+    onLoadMetaData?: (duration: number) => void;
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    onVolumeChange?: (volume: number) => void;
+    onLoadedFrameData?: () => void;
+    captionsSrc?: string;
+}> & {
+    children?: React.ReactNode;
+    src?: string;
+    playing?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    playsInline?: boolean;
+    playRate?: number;
+    controls?: "default" | "simple" | "custom" | "none";
+    customControls?: import("./_types").CustomVideoControls;
+    poster?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+    borderSize?: number | string;
+    borderColor?: string;
+    backgroundColor?: string;
+    objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down";
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnd?: () => void;
+    onProgress?: (progress: number) => void;
+    onLoadProgress?: (progress: number) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onCanPlayThrough?: () => void;
+    onPlayStateChange?: (state: PlayState) => void;
+    onLoadMetaData?: (duration: number) => void;
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    onVolumeChange?: (volume: number) => void;
+    onLoadedFrameData?: () => void;
+    captionsSrc?: string;
+} & React.RefAttributes<VideoElement>>;

package/dist/types/components/Video/_types.d.ts

@@ -0,0 +1,58 @@
+import type React from 'react';
+export type CustomVideoControls = {
+    play?: boolean;
+    fullscreen?: boolean;
+    progress?: boolean;
+    volume?: boolean;
+};
+export declare enum PlayState {
+    Playing = "playing",
+    Paused = "paused",
+    Stopped = "stopped",
+    Ended = "ended"
+}
+export interface VideoElement {
+    play?: () => Promise<void>;
+    stop?: () => Promise<void>;
+    restart?: () => Promise<void>;
+    setVolume?: (volume: number) => void;
+    mute?: (mute: boolean) => void;
+    fullscreen?: (state: boolean) => void;
+    playbackRate?: (rate: number) => void;
+    videoElement?: HTMLVideoElement;
+}
+type VideoBaseProps = {
+    children?: React.ReactNode;
+    src?: string;
+    playing?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    playsInline?: boolean;
+    playRate?: number;
+    controls?: 'default' | 'simple' | 'custom' | 'none';
+    customControls?: CustomVideoControls;
+    poster?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+    borderSize?: number | string;
+    borderColor?: string;
+    backgroundColor?: string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnd?: () => void;
+    onProgress?: (progress: number) => void;
+    onLoadProgress?: (progress: number) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onCanPlayThrough?: () => void;
+    onPlayStateChange?: (state: PlayState) => void;
+    onLoadMetaData?: (duration: number) => void;
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    onVolumeChange?: (volume: number) => void;
+    onLoadedFrameData?: () => void;
+    captionsSrc?: string;
+};
+export type VideoProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof VideoBaseProps> & VideoBaseProps;
+export {};

package/dist/types/components/Video/index.d.ts

@@ -0,0 +1,2 @@
+export { Video } from './Video';
+export type { CustomVideoControls, PlayState, VideoElement, VideoProps, } from './_types';

package/dist/types/components/VideoController/VideoController.d.ts

@@ -0,0 +1,2 @@
+import type { VideoControllerProps } from './_types';
+export declare function VideoController(props: Readonly<VideoControllerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/VideoController/_types.d.ts

@@ -0,0 +1,15 @@
+import type { Transition, Variants } from 'motion/react';
+import type React from 'react';
+export type VideoControllerProps = {
+    dragConstraintsRef?: React.RefObject<HTMLElement | null>;
+    overlayColor?: string;
+    overlayOpacity?: number;
+    transition?: Transition;
+    variants?: Variants;
+    initial?: string;
+    animate?: string;
+    exit?: string;
+    draggable?: boolean;
+    padding?: number | string;
+    borderRadius?: number | string;
+};

package/dist/types/components/VideoController/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoController } from './VideoController';
+export type { VideoControllerProps } from './_types';

package/dist/types/index.d.ts

@@ -84,3 +84,7 @@ export type { LevelProps } from './components/Level';
 export { UploadArea } from './components/UploadArea';
 export type { UploadAreaProps } from './components/UploadArea/_types';
 export { imageTypes, videoTypes, documentTypes, audioTypes, textTypes, allTypes, } from './components/UploadArea/_types';
+export { Video } from './components/Video';
+export type { CustomVideoControls, PlayState, VideoElement, VideoProps, } from './components/Video';
+export { VideoController } from './components/VideoController';
+export type { VideoControllerProps } from './components/VideoController';

package/dist/types/stores/index.d.ts

@@ -8,3 +8,4 @@ export * from './uploads';
 export * from './volume';
 export * from './WebRTC';
 export * from './window';
+export * from './video';

package/dist/types/stores/video/_types.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { VideoProps } from '../../components/Video';
+export type VideoDescriptor = {
+    id?: string;
+    component: React.ComponentType<VideoProps>;
+    props?: VideoProps;
+};
+export interface VideoStore {
+    video: VideoDescriptor | null;
+    actions: {
+        show: (modal: VideoDescriptor | null) => void;
+        clear: () => void;
+    };
+}

package/dist/types/stores/video/index.d.ts

@@ -0,0 +1,2 @@
+export { useVideoStore, useVideo, useVideoActions, videoActions, getVideo, } from './videoStore';
+export type { VideoStore, VideoDescriptor, } from './_types';

package/dist/types/stores/video/videoStore.d.ts

@@ -0,0 +1,12 @@
+import type { VideoDescriptor, VideoStore } from './_types';
+export declare const useVideoStore: import("zustand").UseBoundStore<import("zustand").StoreApi<VideoStore>>;
+export declare const useVideo: () => VideoDescriptor | null;
+export declare const useVideoActions: () => {
+    show: (modal: VideoDescriptor | null) => void;
+    clear: () => void;
+};
+export declare const videoActions: {
+    show: (modal: VideoDescriptor | null) => void;
+    clear: () => void;
+};
+export declare const getVideo: () => VideoDescriptor | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.1.36",
+	"version": "0.1.37",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
 	"exports": {