@uoguelph/react-components 1.3.13 → 1.4.0

package/dist/button.js

@@ -1,150 +1,150 @@
 "use client";
-import { jsx as a } from "react/jsx-runtime";
-import { twMerge as n } from "tailwind-merge";
-import { tv as b } from "tailwind-variants";
-const d = "button";
-function f({
-  as: e,
-  color: l = "red",
+import { jsx as n } from "react/jsx-runtime";
+import { twMerge as b } from "tailwind-merge";
+import { tv as d } from "tailwind-variants";
+const f = "button";
+function g({
+  as: l,
+  color: o = "red",
   outlined: s = !1,
-  children: u,
-  className: t,
-  disabled: o = !1,
-  ...r
+  children: t,
+  className: r,
+  disabled: e = !1,
+  ...c
 }) {
-  const c = e ?? d, i = b({
-    base: "uog:font-medium uog:shadow-sm uog:inline-flex uog:items-center uog:justify-center uog:px-6 uog:py-4 uog:text-lg uog:no-underline uog:transition-colors uog:focus-visible:outline-none uog:cursor-pointer uog:focus-visible:ring-2 uog:focus-visible:ring-offset-2",
+  const i = l ?? f, u = d({
+    base: "inline-flex cursor-pointer items-center justify-center px-6 py-4 text-lg font-medium no-underline shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
     variants: {
       color: {
-        red: "uog:focus-visible:ring-red",
-        yellow: "uog:focus-visible:ring-yellow",
-        blue: "uog:focus-visible:ring-blue",
-        green: "uog:focus-visible:ring-green",
-        black: "uog:focus-visible:ring-black"
+        red: "focus-visible:ring-red",
+        yellow: "focus-visible:ring-yellow",
+        blue: "focus-visible:ring-blue",
+        green: "focus-visible:ring-green",
+        black: "focus-visible:ring-black"
       },
       outlined: {
-        true: "uog:border-2"
+        true: "border-2"
       },
       disabled: {
-        true: "uog:cursor-not-allowed uog:opacity-50"
+        true: "cursor-not-allowed opacity-50"
       }
     },
     compoundVariants: [
       {
         color: "red",
         outlined: !1,
-        class: "uog:bg-red uog:text-red-contrast"
+        class: "bg-red text-red-contrast"
       },
       {
         color: "red",
         outlined: !0,
-        class: "uog:border-red uog:text-red"
+        class: "border-red text-red"
       },
       {
         color: "red",
         outlined: !1,
         disabled: !1,
-        class: "uog:hocus-visible:bg-red-focus"
+        class: "hocus-visible:bg-red-focus"
       },
       {
         color: "red",
         outlined: !0,
         disabled: !1,
-        class: "uog:hocus-visible:bg-red uog:hocus-visible:text-red-contrast"
+        class: "hocus-visible:bg-red hocus-visible:text-red-contrast"
       },
       {
         color: "yellow",
         outlined: !1,
-        class: "uog:bg-yellow uog:text-yellow-contrast"
+        class: "bg-yellow text-yellow-contrast"
       },
       {
         color: "yellow",
         outlined: !0,
-        class: "uog:border-yellow uog:text-yellow"
+        class: "border-yellow text-yellow"
       },
       {
         color: "yellow",
         outlined: !1,
         disabled: !1,
-        class: "uog:hocus-visible:bg-yellow-focus"
+        class: "hocus-visible:bg-yellow-focus"
       },
       {
         color: "yellow",
         outlined: !0,
         disabled: !1,
-        class: "uog:hocus-visible:bg-yellow uog:hocus-visible:text-yellow-contrast"
+        class: "hocus-visible:bg-yellow hocus-visible:text-yellow-contrast"
       },
       {
         color: "blue",
         outlined: !1,
-        class: "uog:bg-blue uog:text-blue-contrast"
+        class: "bg-blue text-blue-contrast"
       },
       {
         color: "blue",
         outlined: !0,
-        class: "uog:border-blue uog:text-blue"
+        class: "border-blue text-blue"
       },
       {
         color: "blue",
         outlined: !1,
         disabled: !1,
-        class: "uog:hocus-visible:bg-blue-focus"
+        class: "hocus-visible:bg-blue-focus"
       },
       {
         color: "blue",
         outlined: !0,
         disabled: !1,
-        class: "uog:hocus-visible:bg-blue uog:hocus-visible:text-blue-contrast"
+        class: "hocus-visible:bg-blue hocus-visible:text-blue-contrast"
       },
       {
         color: "green",
         outlined: !1,
-        class: "uog:bg-green uog:text-green-contrast"
+        class: "bg-green text-green-contrast"
       },
       {
         color: "green",
         outlined: !0,
-        class: "uog:border-green uog:text-green"
+        class: "border-green text-green"
       },
       {
         color: "green",
         outlined: !1,
         disabled: !1,
-        class: "uog:hocus-visible:bg-green-focus"
+        class: "hocus-visible:bg-green-focus"
       },
       {
         color: "green",
         outlined: !0,
         disabled: !1,
-        class: "uog:hocus-visible:bg-green uog:hocus-visible:text-green-contrast"
+        class: "hocus-visible:bg-green hocus-visible:text-green-contrast"
       },
       {
         color: "black",
         outlined: !1,
-        class: "uog:bg-black uog:text-black-contrast"
+        class: "bg-black text-black-contrast"
       },
       {
         color: "black",
         outlined: !0,
-        class: "uog:border-black uog:text-black"
+        class: "border-black text-black"
       },
       {
         color: "black",
         outlined: !1,
         disabled: !1,
-        class: "uog:hocus-visible:bg-black-focus"
+        class: "hocus-visible:bg-black-focus"
       },
       {
         color: "black",
         outlined: !0,
         disabled: !1,
-        class: "uog:hocus-visible:bg-black uog:hocus-visible:text-black-contrast"
+        class: "hocus-visible:bg-black hocus-visible:text-black-contrast"
       }
     ]
-  }), g = n(i({ color: l, outlined: s, disabled: o }), t);
-  return /* @__PURE__ */ a(c, { className: `uofg-button ${g}`, disabled: o, ...r, children: u });
+  }), a = b(u({ color: o, outlined: s, disabled: e }), r);
+  return /* @__PURE__ */ n(i, { className: `uofg-button ${a}`, disabled: e, ...c, children: t });
 }
-f.displayName = "Button";
+g.displayName = "Button";
 export {
-  f as Button
+  g as Button
 };

package/dist/card-content.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
 import { useContext as n } from "react";
-import { twMerge as g } from "tailwind-merge";
-import { tv as s } from "tailwind-variants";
-import { CardContext as u } from "./card-context.js";
-function a({ children: t, className: r }) {
-  const o = n(u), e = s({
-    base: "uog:flex uog:flex-col uog:flex-1 uog:gap-2 uog:bg-grey-light-bg uog:p-5 uog:text-grey-light-contrast",
+import { twMerge as s } from "tailwind-merge";
+import { tv as a } from "tailwind-variants";
+import { CardContext as l } from "./card-context.js";
+function c({ children: o, className: r }) {
+  const t = n(l), e = a({
+    base: "flex flex-1 flex-col gap-2 bg-grey-light-bg p-5 text-grey-light-contrast",
     variants: {
       isLink: {
-        true: "uog:transition-colors uog:group-hocus-visible:bg-yellow uog:group-hocus-visible:text-yellow-contrast"
+        true: "transition-colors group-hocus-visible:bg-yellow group-hocus-visible:text-yellow-contrast"
       }
     }
   });
-  return /* @__PURE__ */ i("div", { className: `uofg-card-content ${g(e({ isLink: (o == null ? void 0 : o.isLink) ?? !1 }), r)}`, children: t });
+  return /* @__PURE__ */ i("div", { className: `uofg-card-content ${s(e({ isLink: (t == null ? void 0 : t.isLink) ?? !1 }), r)}`, children: o });
 }
-a.displayName = "CardContent";
+c.displayName = "CardContent";
 export {
-  a as CardContent
+  c as CardContent
 };

package/dist/card-footer.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as a } from "react/jsx-runtime";
-import { useContext as g } from "react";
-import { twMerge as i } from "tailwind-merge";
-import { tv as n } from "tailwind-variants";
-import { CardContext as s } from "./card-context.js";
-function u({ children: r, className: t }) {
-  const o = g(s), e = n({
-    base: "uog:flex uog:gap-2 uog:bg-grey-light uog:px-5 uog:py-2 uog:text-grey-light-contrast uog:transition-colors",
+import { useContext as i } from "react";
+import { twMerge as n } from "tailwind-merge";
+import { tv as s } from "tailwind-variants";
+import { CardContext as c } from "./card-context.js";
+function m({ children: t, className: e }) {
+  const r = i(c), o = s({
+    base: "flex gap-2 bg-grey-light px-5 py-2 text-grey-light-contrast transition-colors",
     variants: {
       centered: {
-        true: "uog:justify-center"
+        true: "justify-center"
       }
     }
   });
-  return /* @__PURE__ */ a("div", { className: `uofg-card-footer ${i(e({ centered: (o == null ? void 0 : o.centered) ?? !1 }), t)}`, children: r });
+  return /* @__PURE__ */ a("div", { className: `uofg-card-footer ${n(o({ centered: (r == null ? void 0 : r.centered) ?? !1 }), e)}`, children: t });
 }
-u.displayName = "CardFooter";
+m.displayName = "CardFooter";
 export {
-  u as CardFooter
+  m as CardFooter
 };

package/dist/card-image.js

@@ -1,42 +1,42 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useContext as f } from "react";
-import { twMerge as p } from "tailwind-merge";
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as g } from "react";
+import { twMerge as u } from "tailwind-merge";
 import { tv as w } from "tailwind-variants";
 import { CardContext as v } from "./card-context.js";
 const C = "img";
 function h({
-  as: e,
-  src: a,
+  as: a,
+  src: o,
   alt: i,
   width: n,
   height: t,
   className: m,
   ...s
 }) {
-  const g = e ?? C, o = f(v), u = w({
+  const l = a ?? C, r = g(v), c = w({
     slots: {
-      container: "uog:w-full uog:overflow-hidden",
-      wrapper: "uog:w-full uog:overflow-hidden",
-      image: "uog:w-full"
+      container: "w-full overflow-hidden",
+      wrapper: "w-full overflow-hidden",
+      image: "w-full"
     },
     variants: {
       isLink: {
         true: {
-          wrapper: "uog:ease-in-out uog:transition-transform uog:duration-200 uog:group-hover:scale-110"
+          wrapper: "transition-transform duration-200 ease-in-out group-hover:scale-110"
         }
       }
     }
-  }), { container: l, wrapper: c, image: d } = u({ isLink: (o == null ? void 0 : o.isLink) ?? !1 });
-  return /* @__PURE__ */ r("div", { className: `uofg-card-image-container ${l()}`, children: /* @__PURE__ */ r("div", { className: `uofg-card-image-wrapper ${c()}`, children: /* @__PURE__ */ r(
-    g,
+  }), { container: d, wrapper: f, image: p } = c({ isLink: (r == null ? void 0 : r.isLink) ?? !1 });
+  return /* @__PURE__ */ e("div", { className: `uofg-card-image-container ${d()}`, children: /* @__PURE__ */ e("div", { className: `uofg-card-image-wrapper ${f()}`, children: /* @__PURE__ */ e(
+    l,
     {
       ...s,
-      src: a,
+      src: o,
       alt: i,
       width: n,
       height: t,
-      className: `uofg-card-image ${p(d(), m)}`
+      className: `uofg-card-image ${u(p(), m)}`
     }
   ) }) });
 }

package/dist/card-title.js

@@ -4,18 +4,18 @@ import { useContext as n } from "react";
 import { twMerge as a } from "tailwind-merge";
 import { tv as m } from "tailwind-variants";
 import { CardContext as s } from "./card-context.js";
-function u({ children: t, className: r }) {
+function c({ children: t, className: r }) {
   const e = n(s), o = m({
-    base: "uog:flex uog:font-bold uog:text-lg",
+    base: "flex text-lg font-bold",
     variants: {
       centered: {
-        true: "uog:items-center uog:justify-center"
+        true: "items-center justify-center"
       }
     }
   });
   return /* @__PURE__ */ i("div", { className: `uofg-card-title ${a(o({ centered: (e == null ? void 0 : e.centered) ?? !1 }), r)}`, children: t });
 }
-u.displayName = "CardTitle";
+c.displayName = "CardTitle";
 export {
-  u as CardTitle
+  c as CardTitle
 };

package/dist/card.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { Children as f } from "react";
-import { twMerge as l } from "tailwind-merge";
-import { tv as c } from "tailwind-variants";
+import { Children as u } from "react";
+import { twMerge as c } from "tailwind-merge";
+import { tv as d } from "tailwind-variants";
 import { CardContent as w } from "./card-content.js";
-import { CardContext as d } from "./card-context.js";
+import { CardContext as p } from "./card-context.js";
 import { CardFooter as A } from "./card-footer.js";
-import { CardImage as p } from "./card-image.js";
+import { CardImage as g } from "./card-image.js";
 import { CardTitle as F } from "./card-title.js";
 const C = "div";
 function v({
@@ -16,8 +16,8 @@ function v({
   children: o,
   ...r
 }) {
-  const a = i ?? C, u = c({
-    base: "uog:group uog:ease-in-out uog:focus-visible:ring-light-blue uog:flex uog:flex-col uog:justify-center uog:transition uog:duration-200 uog:focus-visible:ring-2 uog:focus-visible:ring-offset-2 uog:focus-visible:outline-none",
+  const a = i ?? C, m = d({
+    base: "group focus-visible:ring-light-blue flex flex-col justify-center transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
     variants: {
       isLink: {
         true: ""
@@ -30,17 +30,17 @@ function v({
       {
         isLink: !0,
         hasImage: !1,
-        class: "uog:transition-colors uog:group-hover:bg-yellow"
+        class: "transition-colors group-hover:bg-yellow"
       }
     ]
-  }), e = "href" in r, g = f.toArray(o).some((m) => m.type === p);
-  return /* @__PURE__ */ t(a, { ...r, className: `uofg-card ${l(u({ isLink: e, hasImage: g }), n)}`, children: /* @__PURE__ */ t(d.Provider, { value: { isLink: e, centered: s ?? !1 }, children: o }) });
+  }), e = "href" in r, f = u.toArray(o).some((l) => l.type === g);
+  return /* @__PURE__ */ t(a, { ...r, className: `uofg-card ${c(m({ isLink: e, hasImage: f }), n)}`, children: /* @__PURE__ */ t(p.Provider, { value: { isLink: e, centered: s ?? !1 }, children: o }) });
 }
 v.displayName = "Card";
 export {
   v as Card,
   w as CardContent,
   A as CardFooter,
-  p as CardImage,
+  g as CardImage,
   F as CardTitle
 };

package/dist/carousel.js

@@ -1,110 +1,110 @@
 "use client";
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { b as k, c as I } from "./solid-D19hAF5t.js";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
-import { Children as $, useRef as d, useState as A, useEffect as F } from "react";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
+import { Children as $, useRef as x, useState as A, useEffect as F } from "react";
 import { tv as L } from "tailwind-variants";
 import { l as S, b as q, m as w, c as M } from "./math-utils-CnAd98v6.js";
-const R = (u, m, e) => {
-  const n = u.scrollLeft, s = performance.now();
+const R = (c, h, t) => {
+  const o = c.scrollLeft, n = performance.now();
   return new Promise((r) => {
-    const a = (o) => {
-      const f = o - s, i = q(Math.min(f / e, 1), 0.25, 0, 0.25, 1);
-      u.scrollLeft = S(n, m, i), f < e ? requestAnimationFrame(a) : r();
+    const f = (e) => {
+      const u = e - n, i = q(Math.min(u / t, 1), 0.25, 0, 0.25, 1);
+      c.scrollLeft = S(o, h, i), u < t ? requestAnimationFrame(f) : r();
     };
-    requestAnimationFrame(a);
+    requestAnimationFrame(f);
   });
 };
-function G({ children: u, display: m = 1, loop: e = "none" }) {
-  const n = $.count(u), s = Math.max(m, 1), r = d(null), a = d(0), [o, f] = A(0), i = n - s, h = d(!1);
+function G({ children: c, display: h = 1, loop: t = "none" }) {
+  const o = $.count(c), n = Math.max(h, 1), r = x(null), f = x(0), [e, u] = A(0), i = o - n, d = x(!1);
   F(() => {
-    var t;
+    var s;
     if (!r.current)
       return;
-    const c = ((t = r.current) == null ? void 0 : t.offsetWidth) / s;
-    (e === "jump" || e === "none") && (h.current = !0, R(r.current, c * o, 250).then(() => {
-      h.current = !1;
-    })), a.current = o;
-  }, [o, e, i, s]);
-  const x = (c) => {
-    if (h.current) return;
-    let t;
-    switch (e) {
+    const l = ((s = r.current) == null ? void 0 : s.offsetWidth) / n;
+    (t === "jump" || t === "none") && (d.current = !0, R(r.current, l * e, 250).then(() => {
+      d.current = !1;
+    })), f.current = e;
+  }, [e, t, i, n]);
+  const b = (l) => {
+    if (d.current) return;
+    let s;
+    switch (t) {
       case "none":
-        t = M(o + c, 0, i);
+        s = M(e + l, 0, i);
         break;
       case "jump":
-        t = w(o + c, i + 1);
+        s = w(e + l, i + 1);
         break;
       case "continuous":
-        t = w(o + c, n);
+        s = w(e + l, o);
         break;
       default:
-        t = 0;
+        s = 0;
     }
-    f(t);
+    u(s);
   }, C = L({
     slots: {
-      base: "uog:relative uog:flex uog:h-fit uog:min-h-[7rem] uog:w-full uog:flex-col-reverse",
-      contentContainer: "uog:grid uog:w-full uog:flex-1 uog:grid-cols-[repeat(var(--items),calc(100%/var(--display)))] uog:overflow-x-hidden [&>*]:[grid-row:1]",
-      controlContainer: "uog:md:contents uog:flex uog:h-16 uog:w-full uog:pt-8",
-      control: "uog:sm:text-6xl uog:md:absolute uog:flex uog:h-full uog:w-16 uog:flex-1 uog:items-center uog:justify-center uog:text-3xl uog:text-blue uog:transition-[transform,color,opacity,visibility] uog:focus-visible:ring-2 uog:focus-visible:ring-offset-2 uog:focus-visible:outline-none uog:hocus-visible:text-blue-focus"
+      base: "relative flex h-fit min-h-[7rem] w-full flex-col-reverse",
+      contentContainer: "grid w-full flex-1 grid-cols-[repeat(var(--items),calc(100%/var(--display)))] overflow-x-hidden [&>*]:[grid-row:1]",
+      controlContainer: "flex h-16 w-full pt-8 md:contents",
+      control: "flex h-full w-16 flex-1 items-center justify-center text-3xl text-blue transition-[transform,color,opacity,visibility] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:text-6xl md:absolute hocus-visible:text-blue-focus"
     },
     variants: {
       showControls: {
         true: {
-          base: "uog:sm:px-16"
+          base: "sm:px-16"
         },
         false: {
-          control: "uog:pointer-events-none uog:invisible uog:opacity-0"
+          control: "pointer-events-none invisible opacity-0"
         }
       },
       direction: {
         left: {
-          control: "uog:left-0 uog:hocus-visible:-translate-x-1 uog:focus-visible:-translate-x-1"
+          control: "left-0 focus-visible:-translate-x-1 hocus-visible:-translate-x-1"
         },
         right: {
-          control: "uog:right-0 uog:hocus-visible:translate-x-1 uog:focus-visible:translate-x-1"
+          control: "right-0 focus-visible:translate-x-1 hocus-visible:translate-x-1"
         }
       }
     }
-  }), b = n > s, { base: y, contentContainer: N, controlContainer: j, control: v } = C({ showControls: b });
-  return /* @__PURE__ */ g("div", { className: `uofg-carousel ${y()}`, children: [
-    b && /* @__PURE__ */ g("div", { className: `uofg-carousel-control-container ${j()}`, children: [
-      /* @__PURE__ */ g(
+  }), v = o > n, { base: y, contentContainer: N, controlContainer: j, control: p } = C({ showControls: v });
+  return /* @__PURE__ */ m("div", { className: `uofg-carousel ${y()}`, children: [
+    v && /* @__PURE__ */ m("div", { className: `uofg-carousel-control-container ${j()}`, children: [
+      /* @__PURE__ */ m(
         "button",
         {
-          onClick: () => x(-1),
-          className: `uofg-carousel-shift-left ${v({ showControls: !(e === "none" && o === 0), direction: "left" })}`,
+          onClick: () => b(-1),
+          className: `uofg-carousel-shift-left ${p({ showControls: !(t === "none" && e === 0), direction: "left" })}`,
           children: [
-            /* @__PURE__ */ l("span", { className: "uog:sr-only", children: "Shift left" }),
-            /* @__PURE__ */ l(p, { icon: k })
+            /* @__PURE__ */ a("span", { className: "sr-only", children: "Shift left" }),
+            /* @__PURE__ */ a(g, { icon: k })
           ]
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ m(
         "button",
         {
-          onClick: () => x(1),
-          className: `uofg-carousel-shift-right ${v({ showControls: !(e === "none" && o === i), direction: "right" })}`,
+          onClick: () => b(1),
+          className: `uofg-carousel-shift-right ${p({ showControls: !(t === "none" && e === i), direction: "right" })}`,
           children: [
-            /* @__PURE__ */ l("span", { className: "uog:sr-only", children: "Shift right" }),
-            /* @__PURE__ */ l(p, { icon: I })
+            /* @__PURE__ */ a("span", { className: "sr-only", children: "Shift right" }),
+            /* @__PURE__ */ a(g, { icon: I })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ a(
       "div",
       {
         className: `uofg-carousel-content-container ${N()}`,
         ref: r,
         style: {
           // Define CSS variables for the grid layout
-          "--items": n,
-          "--display": s
+          "--items": o,
+          "--display": n
         },
-        children: u
+        children: c
       }
     )
   ] });