@lukeashford/aurelius 2.7.0 → 2.8.0

package/dist/index.mjs

@@ -78,6 +78,7 @@ Input.displayName = "Input";
 
 // src/components/Card.tsx
 import React3 from "react";
+import ReactPlayer from "react-player";
 import { Check } from "lucide-react";
 var VARIANT_STYLES = {
   default: "bg-charcoal shadow-sm border border-gold/30",
@@ -111,7 +112,13 @@ var CardBase = React3.forwardRef(
         ...props
       },
       children,
-      selected && /* @__PURE__ */ React3.createElement("div", { className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian" }, /* @__PURE__ */ React3.createElement(Check, { className: "h-4 w-4" }))
+      selected && /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian"
+        },
+        /* @__PURE__ */ React3.createElement(Check, { className: "h-4 w-4" })
+      )
     );
   }
 );
@@ -161,7 +168,16 @@ var CardFooter = React3.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 var CardMedia = React3.forwardRef(
-  ({ src, alt = "", aspect = "video", position = "top", className, children, ...props }, ref) => {
+  ({
+    src,
+    alt = "",
+    aspect = "video",
+    position = "top",
+    isVideo = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
     const aspectClass = {
       video: "aspect-video",
       square: "aspect-square",
@@ -172,7 +188,7 @@ var CardMedia = React3.forwardRef(
       {
         ref,
         className: cx(
-          "overflow-hidden",
+          "overflow-hidden relative",
           aspectClass,
           position === "top" && "border-b border-ash",
           position === "bottom" && "border-t border-ash",
@@ -180,7 +196,16 @@ var CardMedia = React3.forwardRef(
         ),
         ...props
       },
-      src ? /* @__PURE__ */ React3.createElement("img", { src, alt, className: "w-full h-full object-cover" }) : children
+      src ? isVideo ? /* @__PURE__ */ React3.createElement(
+        ReactPlayer,
+        {
+          src,
+          width: "100%",
+          height: "100%",
+          className: "absolute top-0 left-0",
+          controls: true
+        }
+      ) : /* @__PURE__ */ React3.createElement("img", { src, alt, className: "w-full h-full object-cover" }) : children
     );
   }
 );
@@ -3302,21 +3327,91 @@ var ImageCard = React45.forwardRef(
         },
         overlay
       )
-    ), (title || subtitle || children) && /* @__PURE__ */ React45.createElement("div", { className: cx("px-4 pt-4", contentClassName) }, title && /* @__PURE__ */ React45.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React45.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
+    ), (title || subtitle || children) && /* @__PURE__ */ React45.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React45.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React45.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
   }
 );
 ImageCard.displayName = "ImageCard";
 
-// src/components/SectionHeading.tsx
+// src/components/VideoCard.tsx
 import React46 from "react";
+import ReactPlayer2 from "react-player";
+var ASPECT_RATIO_PRESETS2 = {
+  video: "16 / 9",
+  cinema: "21 / 9",
+  square: "1 / 1"
+};
+function resolveAspectRatio2(ratio) {
+  if (ratio in ASPECT_RATIO_PRESETS2) {
+    return ASPECT_RATIO_PRESETS2[ratio];
+  }
+  return ratio.replace("/", " / ");
+}
+var VideoCard = React46.forwardRef(
+  ({
+    src,
+    title,
+    subtitle,
+    aspectRatio = "video",
+    playing = false,
+    controls = true,
+    light = false,
+    volume,
+    muted = false,
+    loop = false,
+    mediaClassName,
+    contentClassName,
+    className,
+    children,
+    playerProps,
+    ...props
+  }, ref) => {
+    const hasAspectRatio = aspectRatio !== void 0;
+    return /* @__PURE__ */ React46.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-full", className), ...props }, /* @__PURE__ */ React46.createElement(
+      "div",
+      {
+        className: cx(
+          "relative bg-black overflow-hidden",
+          mediaClassName
+        ),
+        style: { aspectRatio: resolveAspectRatio2(aspectRatio) }
+      },
+      /* @__PURE__ */ React46.createElement(
+        ReactPlayer2,
+        {
+          src,
+          playing,
+          controls,
+          light,
+          volume,
+          muted,
+          loop,
+          width: "100%",
+          height: "100%",
+          className: "absolute top-0 left-0",
+          ...playerProps
+        }
+      )
+    ), (title || subtitle || children) && /* @__PURE__ */ React46.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React46.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React46.createElement(
+      "p",
+      {
+        className: "text-sm text-silver leading-normal mt-1"
+      },
+      subtitle
+    ), children));
+  }
+);
+VideoCard.displayName = "VideoCard";
+
+// src/components/SectionHeading.tsx
+import React47 from "react";
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = React46.forwardRef(
+var SectionHeading = React47.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement(
       Component,
       {
         ref,
@@ -3417,6 +3512,7 @@ export {
   Textarea,
   ToastProvider,
   Tooltip,
+  VideoCard,
   useToast,
   version
 };