@opensite/ui 3.0.9 → 3.1.0

package/dist/registry.js

@@ -17,6 +17,7 @@ import { FormEngine, useFileUpload, useContactForm, DynamicFormField, submitPage
 import { AnimatePresence, motion, useMotionValue, useMotionTemplate, useSpring, useTransform, useInView, useScroll, useMotionValueEvent } from 'framer-motion';
 import { Lightbox } from '@page-speed/lightbox';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { Video } from '@page-speed/video';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { GeoMap } from '@page-speed/maps';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -12596,7 +12597,15 @@ function CtaVideoBackgroundHero({
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
                 }
               ),
-              modalVideoUrl && /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: modalVideoUrl, type: "video/mp4" }) })
+              modalVideoUrl && /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: modalVideoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "w-full rounded-lg"
+                }
+              )
             ]
           }
         )
@@ -12622,14 +12631,14 @@ function CtaVideoBackgroundHero({
             ),
             children: [
               backgroundVideoUrl && /* @__PURE__ */ jsx(
-                "video",
+                Video,
                 {
+                  src: backgroundVideoUrl,
                   autoPlay: true,
                   loop: true,
                   muted: true,
                   playsInline: true,
-                  className: "absolute inset-0 h-full w-full object-cover",
-                  children: /* @__PURE__ */ jsx("source", { src: backgroundVideoUrl, type: "video/mp4" })
+                  className: "absolute inset-0 h-full w-full object-cover"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -42068,7 +42077,7 @@ function FaqSplitHero({
     if (video) {
       const { src, className: videoClassName, ...videoRest } = video;
       return /* @__PURE__ */ jsx(
-        "video",
+        Video,
         {
           src,
           className: cn("h-full w-full object-cover", videoClassName),
@@ -52527,14 +52536,14 @@ function HeroVideoBackgroundDark({
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
-        "video",
+        Video,
         {
+          src: videoSrc,
           loop: true,
           playsInline: true,
-          src: videoSrc,
-          className: "absolute top-0 left-0 size-full object-cover",
           autoPlay: true,
-          muted: true
+          muted: true,
+          className: "absolute top-0 left-0 size-full object-cover"
         }
       ),
       /* @__PURE__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })
@@ -54397,16 +54406,16 @@ function HeroPresentationPlatformVideo({
           videoClassName
         ),
         children: /* @__PURE__ */ jsx(
-          "video",
+          Video,
           {
+            src: videoSrc,
             autoPlay: true,
             loop: true,
             muted: true,
             playsInline: true,
             "data-wf-ignore": "true",
             "data-object-fit": "cover",
-            className: "h-full w-full rounded-tl-xl object-cover",
-            children: /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" })
+            className: "h-full w-full rounded-tl-xl object-cover"
           }
         )
       }
@@ -55163,7 +55172,15 @@ function HeroSoftwareGrowthVideoDialog({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -55335,7 +55352,15 @@ function HeroConversionVideoPlay({
     ),
     /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
+        Video,
+        {
+          src: videoUrl,
+          controls: true,
+          autoPlay: true,
+          className: "h-full w-full rounded-lg"
+        }
+      ) })
     ] }) })
   ] });
 }
@@ -55512,7 +55537,7 @@ function HeroVideoOverlayStars({
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsx(
-      "video",
+      Video,
       {
         src: videoSrc,
         muted: true,
@@ -55644,7 +55669,7 @@ function HeroProductivityLauncherVideo({
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
-      "video",
+      Video,
       {
         src: videoSrc,
         loop: true,
@@ -57066,7 +57091,15 @@ function HeroVideoDialogGradient({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -58104,7 +58137,15 @@ function HeroMentorshipVideoSplit({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -58988,7 +59029,15 @@ function HeroCreativeStudioStacked({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -82298,19 +82347,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82466,19 +82512,16 @@ var VideoSection2 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82615,19 +82658,16 @@ var VideoSection3 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82774,19 +82814,16 @@ var VideoSection4 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82918,19 +82955,16 @@ var VideoSection5 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -83062,19 +83096,16 @@ var VideoSection6 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -87951,7 +87982,7 @@ function ProjectDetailArchitectureCarousel(props) {
               transition: { duration: 0.6, delay: 0.2 },
               className: "mb-16",
               children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
-                "video",
+                Video,
                 {
                   src: videoUrl,
                   poster: videoPoster,
@@ -94506,7 +94537,7 @@ function ServicesListVideoShowcase({
                   }
                 ),
                 service.videoUrl && /* @__PURE__ */ jsx(
-                  "video",
+                  Video,
                   {
                     ref: (el) => {
                       videoRefs.current[index] = el;
@@ -101417,7 +101448,7 @@ function LinkTreeBlock({
               "aria-label": `View ${item.alt || item.type} in lightbox`,
               children: [
                 item.type === "video" ? /* @__PURE__ */ jsx(
-                  "video",
+                  Video,
                   {
                     src: item.src,
                     poster: item.poster,

package/dist/services-list-video-showcase.cjs

@@ -5,6 +5,7 @@ var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 var pressable = require('@page-speed/pressable');
@@ -490,7 +491,7 @@ function ServicesListVideoShowcase({
                   }
                 ),
                 service.videoUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                  "video",
+                  video.Video,
                   {
                     ref: (el) => {
                       videoRefs.current[index] = el;

package/dist/services-list-video-showcase.js

@@ -4,6 +4,7 @@ import React4__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
@@ -469,7 +470,7 @@ function ServicesListVideoShowcase({
                   }
                 ),
                 service.videoUrl && /* @__PURE__ */ jsx(
-                  "video",
+                  Video,
                   {
                     ref: (el) => {
                       videoRefs.current[index] = el;

package/dist/social-link-icon.d.cts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/social-link-icon.d.ts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3428,7 +3428,9 @@
     "@page-speed/pdf-viewer": "0.1.9",
     "@page-speed/pressable": "0.0.6",
     "@page-speed/router": "1.0.2",
+    "@page-speed/skins": "0.1.1",
     "@page-speed/social-share": "0.1.7",
+    "@page-speed/video": "0.0.3",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",