highsoft-ui 1.0.144 → 1.0.145

package/dist/lib/components/VideoCover/index.d.ts

@@ -0,0 +1,75 @@
+import { CSSProperties, ReactNode } from 'react';
+/** A single `<source>` entry for the underlying `<video>`. */
+export interface VideoCoverSource {
+    src: string;
+    /** MIME type, e.g. `video/webm`. */
+    type?: string;
+}
+export interface VideoCoverProps {
+    /** Video URL. Use `sources` for multiple self-hosted encodings instead. */
+    src?: string;
+    /** Multiple `<source>` encodings; the browser picks the first it supports. */
+    sources?: VideoCoverSource[];
+    /** Poster image shown before the video loads / fades in. */
+    poster?: string;
+    /**
+     * How the video fills the box, like CSS `object-fit`. `'cover'` (default)
+     * stretches to fill and crops overflow; `'contain'` letterboxes.
+     */
+    fit?: 'cover' | 'contain' | 'fill';
+    /** Autoplay on mount. Default `true`. */
+    autoPlay?: boolean;
+    /** Loop when the video ends. Default `true`. */
+    loop?: boolean;
+    /** Start muted — required for autoplay. Default `true`. */
+    muted?: boolean;
+    /** Play inline on iOS. Default `true`. */
+    playsInline?: boolean;
+    /** How much to preload once loading starts. Default `auto`. */
+    preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Defer loading the video until it scrolls near the viewport (via
+     * `IntersectionObserver`), then fade it in. Default `true`. Set `false` to
+     * load eagerly.
+     */
+    lazy?: boolean;
+    /** Zoom the video slightly when the cover is hovered (preview-tile affordance). */
+    hoverZoom?: boolean;
+    /**
+     * Reduced-motion behavior. Defaults to the user's `prefers-reduced-motion`
+     * setting — when they've asked for reduced motion the video doesn't autoplay
+     * and all transitions are disabled; it shows a single static frame instead.
+     * Pass a value to override the OS setting: `false` forces normal playback,
+     * and `true` / `'no-animation'` / `'skip-to-end'` force the reduced treatment
+     * with a chosen frame:
+     * - `'no-animation'` (or `true`) — the first frame.
+     * - `'skip-to-end'` — the last frame.
+     */
+    reducedMotion?: boolean | 'no-animation' | 'skip-to-end';
+    /**
+     * Fixed aspect ratio, e.g. `'16 / 9'`. Omit to fill the parent's height
+     * instead (size the parent to shape the cover).
+     */
+    aspectRatio?: string;
+    /** Corner radius in px. Default `0`. */
+    radius?: number;
+    /**
+     * Overlay content rendered on top of the video (icons, captions, a play
+     * badge, …). Interactive by default; pointer events pass through the video.
+     */
+    children?: ReactNode;
+    /**
+     * Accessible label. When set, the element is exposed as an image with this
+     * label; when omitted, it's treated as decorative (`aria-hidden`).
+     */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A chrome-less background/cover video — autoplays muted, loops, and stretches
+ * to fill its box like `object-fit: cover` on an image. No controls, no
+ * playback engine, no provider SDKs; just a self-hosted `<video>` with built-in
+ * lazy loading and an optional overlay for arbitrary `children`.
+ */
+export declare const VideoCover: import('react').ForwardRefExoticComponent<VideoCoverProps & import('react').RefAttributes<HTMLVideoElement>>;

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { VideoPlayerProps } from './index';
+export interface VideoPlayerModalProps extends VideoPlayerProps {
+    /** Element that opens the modal (rendered as the dialog trigger). */
+    trigger?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible dialog title (visually hidden). */
+    title?: string;
+    /** Max width of the video frame in the modal. Default `900`. */
+    maxWidth?: number | string;
+    /** Close-button label. Default `'Close'`. */
+    closeLabel?: string;
+}
+/**
+ * Lightbox wrapper around `VideoPlayer` — opens the player in a centered,
+ * dimmed Radix dialog. The player mounts on open (so autoplay + provider SDKs
+ * only kick in then) and unmounts on close (stopping playback).
+ */
+export declare function VideoPlayerModal({ trigger, open, defaultOpen, onOpenChange, title, maxWidth, closeLabel, autoPlay, ...playerProps }: VideoPlayerModalProps): import("react").JSX.Element;
+export declare namespace VideoPlayerModal {
+    var displayName: string;
+}

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

@@ -0,0 +1,43 @@
+import { CSSProperties } from 'react';
+/** A single `<source>` entry for the underlying `<video>`. */
+export interface VideoPlayerSource {
+    src: string;
+    /** MIME type, e.g. `video/mp4`. */
+    type?: string;
+}
+export interface VideoPlayerProps {
+    /**
+     * Video URL. A YouTube or Vimeo link is auto-detected and driven through the
+     * same custom chrome via their player SDKs. Use `sources` for multiple
+     * self-hosted encodings instead.
+     */
+    src?: string;
+    /** Multiple `<source>` encodings; the browser picks the first it supports. */
+    sources?: VideoPlayerSource[];
+    /** Poster image shown before playback (self-hosted video only). */
+    poster?: string;
+    /** Start muted (required by most browsers for `autoPlay`). */
+    muted?: boolean;
+    /** Autoplay on mount. Pair with `muted` for it to actually start. */
+    autoPlay?: boolean;
+    /** Loop when the video ends. */
+    loop?: boolean;
+    /** Play inline on iOS rather than going fullscreen. Defaults to `true`. */
+    playsInline?: boolean;
+    /** How much to preload (self-hosted video only). Defaults to `metadata`. */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** Frame aspect ratio, e.g. `'16 / 9'` (default) or `'4 / 3'`. */
+    aspectRatio?: string;
+    /** Corner radius of the frame in px. Default `16`. */
+    radius?: number;
+    /**
+     * Accent used for the progress + volume fill. Defaults to the Highsoft brand
+     * color; accepts any CSS color or `<image>` value (e.g. a `linear-gradient`).
+     */
+    accentGradient?: string;
+    /** Accessible label for the player region. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const VideoPlayer: import('react').ForwardRefExoticComponent<VideoPlayerProps & import('react').RefAttributes<HTMLVideoElement>>;

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

@@ -0,0 +1,44 @@
+/** Which backend drives playback. Auto-detected from the `src`. */
+export type MediaProvider = 'file' | 'youtube' | 'vimeo';
+export interface MediaState {
+    ready: boolean;
+    playing: boolean;
+    ended: boolean;
+    duration: number;
+    currentTime: number;
+    /** Buffered fraction, 0–1. */
+    buffered: number;
+    /** Volume, 0–1. */
+    volume: number;
+    muted: boolean;
+}
+export declare function detectProvider(src?: string, hasSources?: boolean): MediaProvider;
+/**
+ * An unbranded still frame for a provider's start screen, used to mask the
+ * embed's own (branded) poster before playback begins. YouTube exposes a
+ * thumbnail image; Vimeo's needs an async SDK call, so it's covered with a
+ * solid backdrop instead.
+ */
+export declare function providerPosterUrl(provider: MediaProvider, src?: string): string | undefined;
+export interface MediaEngineOptions {
+    provider: MediaProvider;
+    src?: string;
+    muted: boolean;
+    autoPlay: boolean;
+    loop: boolean;
+}
+export interface MediaEngine {
+    state: MediaState;
+    /** Attach to the native `<video>` when provider is `file`. */
+    videoRef: (node: HTMLVideoElement | null) => void;
+    /** Attach to the embed container when provider is `youtube` / `vimeo`. */
+    mountRef: (node: HTMLDivElement | null) => void;
+    toggle(): void;
+    seekFraction(fraction: number): void;
+    seekBy(deltaSeconds: number): void;
+    setVolume(volume: number): void;
+    toggleMute(): void;
+    beginSeek(): void;
+    endSeek(): void;
+}
+export declare function useMediaEngine({ provider, src, muted, autoPlay, loop }: MediaEngineOptions): MediaEngine;

package/dist/lib/main.d.ts

@@ -58,5 +58,11 @@ export { Notification } from './components/Notification';
 export { SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody, SidebarSection, SidebarResizer, NavItem, NavGroup, NavDisclosure, useSidebarLayout, useOptionalSidebarLayout } from './components/Sidebar';
 export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, NavItemProps, NavGroupProps, NavDisclosureProps, SidebarLayoutContextValue } from './components/Sidebar';
 export { PrefPanel } from './components/PrefPanel';
+export { VideoPlayer } from './components/VideoPlayer';
+export type { VideoPlayerProps, VideoPlayerSource } from './components/VideoPlayer';
+export { VideoPlayerModal } from './components/VideoPlayer/VideoPlayerModal';
+export type { VideoPlayerModalProps } from './components/VideoPlayer/VideoPlayerModal';
+export { VideoCover } from './components/VideoCover';
+export type { VideoCoverProps, VideoCoverSource } from './components/VideoCover';
 export { ThemeLoader, themeLoaderScript } from './components/ThemeLoader';
 export { useTheme, useClipboard, useSuccessFlash } from './utils';

package/dist/main.js

@@ -1,42 +1,45 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-awCDIEXQ.js";
-import { t as s } from "./CopyCode-QiPNPCQN.js";
+import { t as o } from "./Button-DIGyNR41.js";
+import { t as s } from "./CopyCode-_MHQorJS.js";
 import { t as c } from "./FrameworkIcon-Ds6WrxO0.js";
-import { t as l } from "./CodeBlock-BIdeK3gz.js";
+import { t as l } from "./CodeBlock-DtTAC5ru.js";
 import { t as u } from "./Icon-VeXJMj8Q.js";
 import { t as d } from "./Link-CYR92_U0.js";
 import { t as f } from "./ProductIcon-DFLAYWbu.js";
-import { t as p } from "./ButtonGroup-Cwn0djAz.js";
+import { t as p } from "./ButtonGroup-BSQzx-sZ.js";
 import { t as m } from "./InputSolo-DUdKtZjX.js";
-import { t as h } from "./SearchDropdown-D65lySm_.js";
-import { i as g, n as _, r as v, t as y } from "./InputGrouped-DyxraUpb.js";
+import { t as h } from "./SearchDropdown-ECOTZ1Uf.js";
+import { i as g, n as _, r as v, t as y } from "./InputGrouped-BE3zLov9.js";
 import { t as b } from "./Container-BDssaLig.js";
 import { t as x } from "./DiscordInvite-CLYxexdH.js";
 import { t as S } from "./Heading-DNDHqYWO.js";
 import { t as C } from "./Typography-AvvBRu-u.js";
 import { t as w } from "./Logo-Bz0G2G-k.js";
-import { t as T } from "./NewsletterSignup-BMRnrbw8.js";
-import { n as E, r as D, t as O } from "./Dropdown-0Vn7yro7.js";
-import { t as k } from "./PrefPanel-DDD8R_-o.js";
-import { n as A, t as j } from "./Label-DdXaM1Bo.js";
-import { t as M } from "./Footer-BlCmsIDd.js";
-import { n as N } from "./GPTInput-C0YG1990.js";
-import { t as P } from "./Notification-DM31Uzfz.js";
-import { n as F, t as I } from "./Header-DY4mJxHm.js";
-import { t as L } from "./Tabs-BuDaPqdN.js";
-import { n as R, t as z } from "./RadioBox-o1Ssyj0s.js";
-import { n as B, t as V } from "./Checkbox-CrF45NBl.js";
-import { Modal as H } from "./components/Modal/index.js";
-import { t as U } from "./RoadmapDetails-DsLtsnqg.js";
-import { ModalContactFooter as W } from "./components/Modal/ModalContactFooter.js";
-import { useOptionalSidebarLayout as G, useSidebarLayout as K } from "./components/Sidebar/context.js";
-import { SidebarLayout as q, SidebarMain as J } from "./components/Sidebar/SidebarLayout.js";
-import { SidebarResizer as Y } from "./components/Sidebar/SidebarResizer.js";
-import { Sidebar as X, SidebarBody as Z, SidebarHeader as Q, SidebarSection as $ } from "./components/Sidebar/Sidebar.js";
-import { NavItem as ee } from "./components/Sidebar/NavItem.js";
-import { NavGroup as te } from "./components/Sidebar/NavGroup.js";
-import { NavDisclosure as ne } from "./components/Sidebar/NavDisclosure.js";
+import { t as T } from "./NewsletterSignup-CJAI81M3.js";
+import { n as E, r as D, t as O } from "./Dropdown-CVyrHJiC.js";
+import { t as k } from "./PrefPanel-BZUX1nfw.js";
+import { n as A, t as j } from "./Label-C_KZM-FN.js";
+import { t as M } from "./VideoCover-BN8wnHpf.js";
+import { t as N } from "./VideoPlayer-CKjq7IRq.js";
+import { t as P } from "./VideoPlayerModal-DbP3OjSF.js";
+import { t as F } from "./Footer-DW2asf8g.js";
+import { n as I } from "./GPTInput-C0YG1990.js";
+import { t as L } from "./Notification-C2kN_ceR.js";
+import { n as R, t as z } from "./Header-DQ1xi25C.js";
+import { t as B } from "./Tabs-BuDaPqdN.js";
+import { n as V, t as H } from "./RadioBox-o1Ssyj0s.js";
+import { n as U, t as W } from "./Checkbox-wlH6EGWW.js";
+import { Modal as G } from "./components/Modal/index.js";
+import { t as K } from "./RoadmapDetails-CfayA5CZ.js";
+import { ModalContactFooter as q } from "./components/Modal/ModalContactFooter.js";
+import { useOptionalSidebarLayout as J, useSidebarLayout as Y } from "./components/Sidebar/context.js";
+import { SidebarLayout as X, SidebarMain as Z } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as Q } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as $, SidebarBody as ee, SidebarHeader as te, SidebarSection as ne } from "./components/Sidebar/Sidebar.js";
+import { NavItem as re } from "./components/Sidebar/NavItem.js";
+import { NavGroup as ie } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ae } from "./components/Sidebar/NavDisclosure.js";
 import "./components/Sidebar/index.js";
-import { ThemeLoader as re, themeLoaderScript as ie } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, p as ButtonGroup, V as Checkbox, B as CheckboxGroup, l as CodeBlock, b as Container, s as CopyCode, x as DiscordInvite, O as Dropdown, E as DropdownItem, D as DropdownSeparator, M as Footer, y as FormGroup, _ as FormRow, c as FrameworkIcon, N as GPTInput, I as Header, S as Heading, u as Icon, v as InputGrouped, m as InputSolo, j as Label, d as Link, w as Logo, H as Modal, W as ModalContactFooter, ne as NavDisclosure, te as NavGroup, ee as NavItem, A as NewTag, T as NewsletterSignup, P as Notification, k as PrefPanel, f as ProductIcon, z as RadioBox, R as RadioBoxGroup, U as RoadmapDetails, h as SearchDropdown, g as SelectGrouped, X as Sidebar, Z as SidebarBody, Q as SidebarHeader, q as SidebarLayout, J as SidebarMain, Y as SidebarResizer, $ as SidebarSection, F as SubHeader, L as Tabs, re as ThemeLoader, i as ThemeProvider, C as Typography, ie as themeLoaderScript, n as useClipboard, t as useNextTheme, G as useOptionalSidebarLayout, K as useSidebarLayout, r as useSuccessFlash, e as useTheme };
+import { ThemeLoader as oe, themeLoaderScript as se } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, p as ButtonGroup, W as Checkbox, U as CheckboxGroup, l as CodeBlock, b as Container, s as CopyCode, x as DiscordInvite, O as Dropdown, E as DropdownItem, D as DropdownSeparator, F as Footer, y as FormGroup, _ as FormRow, c as FrameworkIcon, I as GPTInput, z as Header, S as Heading, u as Icon, v as InputGrouped, m as InputSolo, j as Label, d as Link, w as Logo, G as Modal, q as ModalContactFooter, ae as NavDisclosure, ie as NavGroup, re as NavItem, A as NewTag, T as NewsletterSignup, L as Notification, k as PrefPanel, f as ProductIcon, H as RadioBox, V as RadioBoxGroup, K as RoadmapDetails, h as SearchDropdown, g as SelectGrouped, $ as Sidebar, ee as SidebarBody, te as SidebarHeader, X as SidebarLayout, Z as SidebarMain, Q as SidebarResizer, ne as SidebarSection, R as SubHeader, B as Tabs, oe as ThemeLoader, i as ThemeProvider, C as Typography, M as VideoCover, N as VideoPlayer, P as VideoPlayerModal, se as themeLoaderScript, n as useClipboard, t as useNextTheme, J as useOptionalSidebarLayout, Y as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/dist/{prism-light-B3yrtgki.js → prism-light-C4xXs3Qn.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-CWTzyETe.js";
+import { r as t, t as n } from "./create-element-WbENDceu.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.144",
+  "version": "1.0.145",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {

package/dist/YoutubeModal-CZgbaRB6.js

@@ -1,92 +0,0 @@
-import { n as e } from "./esm-VMwHsplm.js";
-import { s as t } from "./fa-B95RwBpz.js";
-import { t as n } from "./dist-J9cXmrDi.js";
-import { a as r, i, n as a, o, r as s, s as c, t as l } from "./dist-f0z6DapB.js";
-import { useEffect as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-var h = {
-	dialogClose: "elwCNG_dialogClose",
-	dialogOverlay: "elwCNG_dialogOverlay",
-	show: "elwCNG_show",
-	youtube: "elwCNG_youtube",
-	youtubeContent: "elwCNG_youtubeContent",
-	youtubeCopy: "elwCNG_youtubeCopy",
-	youtubeMedia: "elwCNG_youtubeMedia",
-	youtubePreview: "elwCNG_youtubePreview",
-	youtubePreviewVisible: "elwCNG_youtubePreviewVisible"
-}, g = "Meet the team behind the charts", _ = "Video: Meet the team behind the charts", v = "https://player.vimeo.com/video/955924808?autoplay=1", y = "https://shop.highcharts.com/footer.webm", b = "200px";
-function x() {
-	let x = d(null), [S, C] = f(!1), [w, T] = f(!1);
-	return u(() => {
-		let e = x.current;
-		if (S || !e) return;
-		if (typeof IntersectionObserver > "u") {
-			C(!0);
-			return;
-		}
-		let t = new IntersectionObserver(([e]) => {
-			e?.isIntersecting && (C(!0), t.disconnect());
-		}, { rootMargin: b });
-		return t.observe(e), () => t.disconnect();
-	}, [S]), /* @__PURE__ */ m(l, {
-		onOpenChange: (e) => e && C(!0),
-		children: [/* @__PURE__ */ p(c, {
-			asChild: !0,
-			children: /* @__PURE__ */ m("button", {
-				ref: x,
-				type: "button",
-				className: h.youtube,
-				"aria-label": g,
-				onPointerEnter: () => C(!0),
-				onFocus: () => C(!0),
-				children: [/* @__PURE__ */ p("span", {
-					className: h.youtubeMedia,
-					"aria-hidden": "true",
-					children: S && /* @__PURE__ */ p("video", {
-						className: `${h.youtubePreview} ${w ? h.youtubePreviewVisible : ""}`,
-						autoPlay: !0,
-						loop: !0,
-						muted: !0,
-						playsInline: !0,
-						preload: "metadata",
-						onCanPlay: () => T(!0),
-						children: /* @__PURE__ */ p("source", {
-							src: y,
-							type: "video/webm"
-						})
-					})
-				}), /* @__PURE__ */ m("span", {
-					className: h.youtubeCopy,
-					children: [/* @__PURE__ */ p(t, {}), /* @__PURE__ */ p("p", { children: g })]
-				})]
-			})
-		}), /* @__PURE__ */ m(r, { children: [/* @__PURE__ */ p(i, { className: h.dialogOverlay }), /* @__PURE__ */ m(s, {
-			className: h.youtubeContent,
-			"aria-describedby": void 0,
-			children: [
-				/* @__PURE__ */ p(n, {
-					asChild: !0,
-					children: /* @__PURE__ */ p(o, { children: _ })
-				}),
-				/* @__PURE__ */ p(a, {
-					className: h.dialogClose,
-					"aria-label": "Close",
-					children: /* @__PURE__ */ p(e, {
-						width: 20,
-						height: 20
-					})
-				}),
-				/* @__PURE__ */ p("iframe", {
-					width: "100%",
-					height: "100%",
-					src: v,
-					title: _,
-					allow: "autoplay",
-					allowFullScreen: !0
-				})
-			]
-		})] })]
-	});
-}
-//#endregion
-export { x as t };