@uoguelph/react-components 1.3.11 → 1.3.13

package/dist/components/media-caption/media-caption.d.ts

@@ -8,11 +8,13 @@ type MediaCaptionPropsBase = {
     size?: 'small' | 'medium' | 'large';
     position?: 'left' | 'right' | 'above';
     background?: 'none' | 'grey-light' | 'grey-dark';
+    /** Whether the media should expand to match the height of the caption. */
+    matchCaptionHeight?: boolean;
     className?: string;
     mediaClassName?: string;
 };
 export type MediaCaptionProps<T extends MediaCaptionElementType = typeof defaultElement> = PropsWithChildren<MediaCaptionPropsAs<T> & ComponentPropsWithoutRef<T> & MediaCaptionPropsBase>;
-export declare function MediaCaption<T extends MediaCaptionElementType = typeof defaultElement>({ as, size, position, background, children, src, className, mediaClassName, ...rest }: MediaCaptionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCaption<T extends MediaCaptionElementType = typeof defaultElement>({ as, size, position, background, children, src, className, mediaClassName, matchCaptionHeight, ...rest }: MediaCaptionProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCaption {
     var displayName: string;
 }

package/dist/image-overlay.js

@@ -1,5 +1,5 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { twMerge as k } from "tailwind-merge";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { twMerge as A } from "tailwind-merge";
 import { tv as w } from "tailwind-variants";
 const z = "img";
 function x({
@@ -12,7 +12,7 @@ function x({
   className: u,
   verticalAlignment: s = "center",
   horizontalAlignment: c = "center",
-  overlay: o = "none",
+  overlay: a = "none",
   blurred: m = !1,
   ...v
 }) {
@@ -32,12 +32,14 @@ function x({
       },
       overlay: {
         dark: {
+          base: "dark",
           overlay: "uog:bg-black/60"
         },
         light: {
           overlay: "uog:bg-white/60"
         },
         "dark-gradient": {
+          base: "dark",
           overlay: "uog:from-black/50 uog:via-30% uog:via-black/20 uog:to-transparent"
         },
         "light-gradient": {
@@ -117,15 +119,15 @@ function x({
     imageWrapper: h,
     image: b,
     overlay: p,
-    container: A
-  } = f({ blurred: m, overlay: o, verticalAlignment: s, horizontalAlignment: c });
-  return /* @__PURE__ */ a("div", { className: `uofg-image-overlay ${y()}`, children: [
-    /* @__PURE__ */ a("div", { className: `uofg-image-overlay-wrapper ${h()}`, children: [
+    container: k
+  } = f({ blurred: m, overlay: a, verticalAlignment: s, horizontalAlignment: c });
+  return /* @__PURE__ */ o("div", { className: `uofg-image-overlay ${y()}`, children: [
+    /* @__PURE__ */ o("div", { className: `uofg-image-overlay-wrapper ${h()}`, children: [
       /* @__PURE__ */ e(
         d,
         {
           ...v,
-          className: `uofg-image-overlay-image ${k(b(), u)}`,
+          className: `uofg-image-overlay-image ${A(b(), u)}`,
           src: r,
           width: g,
           height: l,
@@ -133,9 +135,9 @@ function x({
           sizes: "100vw"
         }
       ),
-      o !== "none" && /* @__PURE__ */ e("div", { className: `uofg-image-overlay-overlay ${p()}` })
+      a !== "none" && /* @__PURE__ */ e("div", { className: `uofg-image-overlay-overlay ${p()}` })
     ] }),
-    /* @__PURE__ */ e("div", { className: `uofg-image-overlay-content ${A()}`, children: n })
+    /* @__PURE__ */ e("div", { className: `uofg-image-overlay-content ${k()}`, children: n })
   ] });
 }
 x.displayName = "ImageOverlay";

package/dist/media-caption.js

@@ -1,9 +1,9 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { twMerge as b } from "tailwind-merge";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { twMerge as h } from "tailwind-merge";
 import { tv as x } from "tailwind-variants";
 import { EmbeddedVideo as y } from "./embedded-video.js";
-const h = "img";
-function v({
+const v = "img";
+function k({
   as: e,
   size: o = "small",
   position: s = "left",
@@ -11,12 +11,13 @@ function v({
   children: r,
   src: g,
   className: n,
-  mediaClassName: k,
+  mediaClassName: C,
+  matchCaptionHeight: l,
   ...d
 }) {
-  const i = e ?? h;
+  const i = e ?? v;
   o = (i instanceof y ? "video" : "image") === "video" && o === "small" ? "medium" : o;
-  const l = x({
+  const p = x({
     slots: {
       base: "uofg-media-caption uog:flex uog:flex-col",
       mediaWrapper: "uofg-media-caption-wrapper",
@@ -44,14 +45,17 @@ function v({
       },
       background: {
         "grey-light": {
-          base: "light",
-          caption: "uog:bg-grey-light-bg uog:text-body-copy"
+          base: "light uog:bg-grey-light-bg uog:text-body-copy"
         },
         "grey-dark": {
-          base: "dark",
-          caption: "uog:bg-grey-dark-bg uog:text-body-copy-on-dark"
+          base: "dark uog:bg-grey-dark-bg uog:text-body-copy-on-dark"
         },
         none: {}
+      },
+      matchCaptionHeight: {
+        true: {
+          media: "uog:h-full"
+        }
       }
     },
     compoundVariants: [
@@ -119,13 +123,13 @@ function v({
         }
       }
     ]
-  }), { base: p, mediaWrapper: c, media: m, caption: u } = l({ size: o, position: s, background: t });
-  return /* @__PURE__ */ f("div", { className: b(p(), n), children: [
-    /* @__PURE__ */ a("div", { className: c(), children: /* @__PURE__ */ a(i, { ...d, src: g, className: m() }) }),
-    /* @__PURE__ */ a("div", { className: u(), children: r })
+  }), { base: c, mediaWrapper: m, media: u, caption: f } = p({ size: o, position: s, background: t, matchCaptionHeight: l });
+  return /* @__PURE__ */ b("div", { className: h(c(), n), children: [
+    /* @__PURE__ */ a("div", { className: m(), children: /* @__PURE__ */ a(i, { ...d, src: g, className: u() }) }),
+    /* @__PURE__ */ a("div", { className: f(), children: r })
   ] });
 }
-v.displayName = "MediaCaption";
+k.displayName = "MediaCaption";
 export {
-  v as MediaCaption
+  k as MediaCaption
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {
@@ -76,5 +76,5 @@
   "bugs": {
     "url": "https://github.com/ccswbs/uofg-components/issues"
   },
-  "gitHead": "7b145d50f6994437ccdcdbd8ad65a7fa9017073c"
+  "gitHead": "c05a7bc222922450ffa1f751b53444d41bcc85e0"
 }