@uoguelph/react-components 1.3.13 → 1.4.0

package/dist/media-caption.js

@@ -1,28 +1,28 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as i } 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 v = "img";
 function k({
-  as: e,
-  size: o = "small",
+  as: o,
+  size: a = "small",
   position: s = "left",
   background: t = "none",
   children: r,
-  src: g,
-  className: n,
+  src: n,
+  className: l,
   mediaClassName: C,
-  matchCaptionHeight: l,
-  ...d
+  matchCaptionHeight: d,
+  ...p
 }) {
-  const i = e ?? v;
-  o = (i instanceof y ? "video" : "image") === "video" && o === "small" ? "medium" : o;
-  const p = x({
+  const e = o ?? v;
+  a = (e instanceof y ? "video" : "image") === "video" && a === "small" ? "medium" : a;
+  const c = x({
     slots: {
-      base: "uofg-media-caption uog:flex uog:flex-col",
+      base: "uofg-media-caption flex flex-col",
       mediaWrapper: "uofg-media-caption-wrapper",
-      media: "uofg-media-caption-media uog:w-full uog:object-cover",
-      caption: "uofg-media-caption-caption uog:p-4"
+      media: "uofg-media-caption-media w-full object-cover",
+      caption: "uofg-media-caption-caption p-4"
     },
     variants: {
       size: {
@@ -32,29 +32,29 @@ function k({
       },
       position: {
         left: {
-          base: "uog:md:grid"
+          base: "md:grid"
         },
         right: {
-          base: "uog:md:grid",
-          mediaWrapper: "uog:col-start-2 uog:row-start-1",
-          caption: "uog:col-start-1 uog:row-start-1"
+          base: "md:grid",
+          mediaWrapper: "col-start-2 row-start-1",
+          caption: "col-start-1 row-start-1"
         },
         above: {
-          caption: "uog:flex-1"
+          caption: "flex-1"
         }
       },
       background: {
         "grey-light": {
-          base: "light uog:bg-grey-light-bg uog:text-body-copy"
+          base: "light bg-grey-light-bg text-body-copy"
         },
         "grey-dark": {
-          base: "dark uog:bg-grey-dark-bg uog:text-body-copy-on-dark"
+          base: "dark bg-grey-dark-bg text-body-copy-on-dark"
         },
         none: {}
       },
       matchCaptionHeight: {
         true: {
-          media: "uog:h-full"
+          media: "h-full"
         }
       }
     },
@@ -63,70 +63,70 @@ function k({
         size: "small",
         position: "left",
         class: {
-          base: "uog:grid-cols-[1fr_4fr]"
+          base: "grid-cols-[1fr_4fr]"
         }
       },
       {
         size: "medium",
         position: "left",
         class: {
-          base: "uog:grid-cols-[1fr_2fr]"
+          base: "grid-cols-[1fr_2fr]"
         }
       },
       {
         size: "large",
         position: "left",
         class: {
-          base: "uog:grid-cols-[1fr_1fr]"
+          base: "grid-cols-[1fr_1fr]"
         }
       },
       {
         size: "small",
         position: "right",
         class: {
-          base: "uog:grid-cols-[4fr_1fr]"
+          base: "grid-cols-[4fr_1fr]"
         }
       },
       {
         size: "medium",
         position: "right",
         class: {
-          base: "uog:grid-cols-[2fr_1fr]"
+          base: "grid-cols-[2fr_1fr]"
         }
       },
       {
         size: "large",
         position: "right",
         class: {
-          base: "uog:grid-cols-[1fr_1fr]"
+          base: "grid-cols-[1fr_1fr]"
         }
       },
       {
         background: "none",
         position: "left",
         class: {
-          caption: "uog:px-0 uog:md:px-4 uog:md:py-0"
+          caption: "px-0 md:px-4 md:py-0"
         }
       },
       {
         background: "none",
         position: "right",
         class: {
-          caption: "uog:px-0 uog:md:px-4 uog:md:py-0"
+          caption: "px-0 md:px-4 md:py-0"
         }
       },
       {
         background: "none",
         position: "above",
         class: {
-          caption: "uog:px-0"
+          caption: "px-0"
         }
       }
     ]
-  }), { 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 })
+  }), { base: m, mediaWrapper: g, media: f, caption: b } = c({ size: a, position: s, background: t, matchCaptionHeight: d });
+  return /* @__PURE__ */ u("div", { className: h(m(), l), children: [
+    /* @__PURE__ */ i("div", { className: g(), children: /* @__PURE__ */ i(e, { ...p, src: n, className: f() }) }),
+    /* @__PURE__ */ i("div", { className: b(), children: r })
   ] });
 }
 k.displayName = "MediaCaption";

package/dist/modal.js

@@ -1,45 +1,45 @@
 "use client";
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { e as f } from "./solid-D19hAF5t.js";
-import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { e as b } from "./solid-D19hAF5t.js";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
 import { Dialog as x, DialogBackdrop as w, CloseButton as h, DialogPanel as y } from "@headlessui/react";
 import { tv as N } from "tailwind-variants";
-function k({ open: u, onClose: a = () => {
-}, role: t = "dialog", labelledBy: r, centered: l, children: g }) {
-  const s = N({
+function k({ open: t, onClose: o = () => {
+}, role: r = "dialog", labelledBy: l, centered: s, children: i }) {
+  const n = N({
     slots: {
-      base: "uog:ease-out uog:relative uog:z-50 uog:transition uog:duration-300 uog:data-[closed]:opacity-0",
-      backdrop: "uog:ease-out uog:fixed uog:inset-0 uog:bg-black/40 uog:transition uog:duration-300 uog:data-[closed]:opacity-0",
-      wrapper: "uog:fixed uog:inset-0 uog:flex uog:w-screen uog:justify-center uog:md:p-4",
-      panelWrapper: "uog:relative uog:w-full uog:flex uog:flex-col uog:items-center",
+      base: "relative z-50 transition duration-300 ease-out data-[closed]:opacity-0",
+      backdrop: "fixed inset-0 bg-black/40 transition duration-300 ease-out data-[closed]:opacity-0",
+      wrapper: "fixed inset-0 flex w-screen justify-center md:p-4",
+      panelWrapper: "relative flex w-full flex-col items-center",
       panel: "",
-      closeButton: "uog:bg-grey-dark-bg uog:md:absolute uog:border-b uog:border-white/40 uog:top-0 uog:right-0 uog:flex uog:h-9 uog:w-full uog:md:w-9 uog:items-center uog:justify-center uog:md:rounded-full uog:text-xl uog:text-white uog:transition-colors uog:hover:bg-red uog:gap-1"
+      closeButton: "top-0 right-0 flex h-9 w-full items-center justify-center gap-1 border-b border-white/40 bg-grey-dark-bg text-xl text-white transition-colors hover:bg-red md:absolute md:w-9 md:rounded-full"
     },
     variants: {
       centered: {
         true: {
-          panelWrapper: "uog:justify-center"
+          panelWrapper: "justify-center"
         }
       }
     }
-  }), { base: i, backdrop: n, wrapper: d, panelWrapper: c, panel: p, closeButton: m } = s({ centered: l });
-  return /* @__PURE__ */ e(
+  }), { base: d, backdrop: c, wrapper: p, panelWrapper: m, panel: u, closeButton: f } = n({ centered: s });
+  return /* @__PURE__ */ a(
     x,
     {
       transition: !0,
-      open: u,
-      role: t,
-      onClose: a,
-      className: `uofg-modal ${i()}`,
-      "aria-labelledby": r,
+      open: t,
+      role: r,
+      onClose: o,
+      className: `uofg-modal ${d()}`,
+      "aria-labelledby": l,
       children: [
-        /* @__PURE__ */ o(w, { transition: !0, className: `uofg-modal-backdrop ${n()}` }),
-        /* @__PURE__ */ o("div", { className: `uofg-modal-wrapper ${d()}`, children: /* @__PURE__ */ e("div", { className: `uofg-modal-panel-wrapper ${c()}`, children: [
-          /* @__PURE__ */ e(h, { onClick: a, className: `uofg-modal-close-button ${m()}`, children: [
-            /* @__PURE__ */ o(b, { icon: f }),
-            /* @__PURE__ */ o("span", { className: "uog:md:sr-only uog:text-base", children: "Close Modal" })
+        /* @__PURE__ */ e(w, { transition: !0, className: `uofg-modal-backdrop ${c()}` }),
+        /* @__PURE__ */ e("div", { className: `uofg-modal-wrapper ${p()}`, children: /* @__PURE__ */ a("div", { className: `uofg-modal-panel-wrapper ${m()}`, children: [
+          /* @__PURE__ */ a(h, { onClick: o, className: `uofg-modal-close-button ${f()}`, children: [
+            /* @__PURE__ */ e(g, { icon: b }),
+            /* @__PURE__ */ e("span", { className: "text-base md:sr-only", children: "Close Modal" })
           ] }),
-          /* @__PURE__ */ o(y, { className: `uofg-modal-panel ${p()}`, children: g })
+          /* @__PURE__ */ e(y, { className: `uofg-modal-panel ${u()}`, children: i })
         ] }) })
       ]
     }

package/dist/navigation-link.js

@@ -1,40 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import { twMerge as c } from "tailwind-merge";
-import { tv as m } from "tailwind-variants";
-const d = "a";
-function b({
-  as: e,
-  active: o,
-  href: g,
-  children: n,
-  className: u,
-  ...i
+import { jsx as e } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+import { tv as d } from "tailwind-variants";
+const b = "a";
+function f({
+  as: o,
+  active: t,
+  href: n,
+  children: i,
+  className: l,
+  ...r
 }) {
-  const l = e ?? d, r = m({
+  const s = o ?? b, a = d({
     slots: {
-      listItem: "uog:contents uog:flex-1",
-      link: "uog:mb-1 uog:flex uog:items-center uog:justify-center uog:rounded-t-sm uog:bg-grey-light-bg uog:px-4 uog:py-3 uog:text-center uog:text-lg uog:font-bold uog:text-black uog:transition-colors uog:hover:bg-grey-light uog:focus:bg-grey-light uog:focus:outline-hidden uog:flex-1"
+      listItem: "contents flex-1",
+      link: "mb-1 flex flex-1 items-center justify-center rounded-t-sm bg-grey-light-bg px-4 py-3 text-center text-lg font-bold text-black transition-colors hover:bg-grey-light focus:bg-grey-light focus:outline-hidden"
     },
     variants: {
       active: {
         true: {
-          link: "uog:text-yellow-contrast uog:hocus-visible:bg-yellow uog:mb-0 uog:border-2 uog:border-yellow uog:bg-yellow uog:order-last uog:md:order-none"
+          link: "order-last mb-0 border-2 border-yellow bg-yellow text-yellow-contrast md:order-none hocus-visible:bg-yellow"
         }
       }
     }
-  }), { listItem: s, link: a } = r({ active: o });
-  return /* @__PURE__ */ t("li", { className: s(), children: /* @__PURE__ */ t(
-    l,
+  }), { listItem: g, link: c } = a({ active: t });
+  return /* @__PURE__ */ e("li", { className: g(), children: /* @__PURE__ */ e(
+    s,
     {
-      ...i,
-      href: g,
-      className: `uofg-navigation-link ${c(a(), u)}`,
-      "aria-current": o ? "page" : void 0,
-      children: n
+      ...r,
+      href: n,
+      className: `uofg-navigation-link ${m(c(), l)}`,
+      "aria-current": t ? "page" : void 0,
+      children: i
     }
   ) });
 }
-b.displayName = "NavigationLink";
+f.displayName = "NavigationLink";
 export {
-  b as NavigationLink
+  f as NavigationLink
 };

package/dist/navigation.js

@@ -1,15 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
-import { twMerge as t } from "tailwind-merge";
-import { NavigationLink as f } from "./navigation-link.js";
-function e({ className: a, children: i }) {
-  const g = t(
-    "uog:md:flex-row uog:flex uog:flex-col uog:gap-1 uog:border-b-4 uog:border-yellow uog:w-full",
-    a
-  );
-  return /* @__PURE__ */ o("nav", { className: "uofg-navigation uog:contents", children: /* @__PURE__ */ o("ul", { className: `uofg-navigation-list ${g}`, children: i }) });
+import { twMerge as e } from "tailwind-merge";
+import { NavigationLink as g } from "./navigation-link.js";
+function n({ className: a, children: i }) {
+  const t = e("flex w-full flex-col gap-1 border-b-4 border-yellow md:flex-row", a);
+  return /* @__PURE__ */ o("nav", { className: "uofg-navigation contents", children: /* @__PURE__ */ o("ul", { className: `uofg-navigation-list ${t}`, children: i }) });
 }
-e.displayName = "Navigation";
+n.displayName = "Navigation";
 export {
-  e as Navigation,
-  f as NavigationLink
+  n as Navigation,
+  g as NavigationLink
 };

package/dist/number-input.js

@@ -1,108 +1,108 @@
 "use client";
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { h as C, i as k } from "./solid-D19hAF5t.js";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as d } from "@fortawesome/react-fontawesome";
 import { Field as F, Label as S, Input as A } from "@headlessui/react";
 import { useState as M, useRef as _, useEffect as z } from "react";
 import { twMerge as E } from "tailwind-merge";
 import { tv as L } from "tailwind-variants";
 import { c as P } from "./math-utils-CnAd98v6.js";
 function O({
-  initialValue: d,
+  initialValue: g,
   color: w = "yellow",
   placeholder: x = "",
-  onInput: e,
-  children: g,
+  onInput: r,
+  children: c,
   className: h,
-  min: i,
-  max: c,
-  value: a,
+  min: u,
+  max: a,
+  value: f,
   ...y
 }) {
-  const [t, l] = M(d ?? 0), s = _(null);
+  const [n, s] = M(g ?? 0), i = _(null);
   z(() => {
-    l(a ?? NaN);
-  }, [a]);
-  const f = (u) => {
-    const r = P(u, i ?? -1 / 0, c ?? 1 / 0);
-    l(r), s.current && (s.current.value = r.toString(), e == null || e(r));
+    s(f ?? NaN);
+  }, [f]);
+  const b = (t) => {
+    const o = P(t, u ?? -1 / 0, a ?? 1 / 0);
+    s(o), i.current && (i.current.value = o.toString(), r == null || r(o));
   }, {
     base: N,
     wrapper: v,
     input: $,
     container: j,
-    control: b
+    control: m
   } = L({
     slots: {
-      base: "uog:flex uog:flex-col uog:gap-0.5",
-      wrapper: "uog:text-input uog:border-grey-light uog:flex uog:rounded-md uog:border uog:px-2 uog:py-2 uog:transition-colors uog:focus-within:border-blue uog:focus:outline-none uog:bg-white",
-      container: "uog:grid uog:items-center uog:justify-center uog:justify-items-center uog:grid-cols-[2rem_1fr_2rem] uog:gap-2",
-      input: "uog:flex-1 uog:focus:outline-none uog:bg-white uog:w-full uog:[appearance:textfield] uog:[&::-webkit-outer-spin-button]:appearance-none uog:[&::-webkit-inner-spin-button]:appearance-none uog:col-2",
-      control: "uog:flex uog:relative uog:items-center uog:justify-center uog:rounded-full uog:text-xl uog:transition-colors uog:shadow uog:cursor-pointer uog:before:absolute uog:before:-z-1 uog:before:w-2/3 uog:before:h-2/3"
+      base: "flex flex-col gap-0.5",
+      wrapper: "text-input flex rounded-md border border-grey-light bg-white px-2 py-2 transition-colors focus-within:border-blue focus:outline-none",
+      container: "grid grid-cols-[2rem_1fr_2rem] items-center justify-center justify-items-center gap-2",
+      input: "col-2 w-full flex-1 [appearance:textfield] bg-white focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+      control: "relative flex cursor-pointer items-center justify-center rounded-full text-xl shadow transition-colors before:absolute before:-z-1 before:h-2/3 before:w-2/3"
     },
     variants: {
       color: {
         red: {
-          control: "uog:text-red uog:before:bg-red-contrast uog:hocus-visible:text-red-focus"
+          control: "text-red before:bg-red-contrast hocus-visible:text-red-focus"
         },
         yellow: {
-          control: "uog:text-yellow uog:before:bg-yellow-contrast uog:hocus-visible:text-yellow-focus"
+          control: "text-yellow before:bg-yellow-contrast hocus-visible:text-yellow-focus"
         },
         blue: {
-          control: "uog:text-blue uog:before:bg-blue-contrast uog:hocus-visible:text-blue-focus"
+          control: "text-blue before:bg-blue-contrast hocus-visible:text-blue-focus"
         },
         green: {
-          control: "uog:text-green uog:before:bg-green-contrast uog:hocus-visible:text-green-focus"
+          control: "text-green before:bg-green-contrast hocus-visible:text-green-focus"
         }
       }
     }
   })({
     color: w ?? "yellow"
   });
-  return /* @__PURE__ */ n(F, { className: `uofg-number-input-field ${E(N(), h)}`, children: [
-    g && /* @__PURE__ */ o(S, { className: "uofg-number-input-label", children: g }),
-    /* @__PURE__ */ n("div", { className: `uofg-number-input-container ${j()}`, children: [
-      /* @__PURE__ */ o("div", { className: `uofg-number-input-wrapper ${v()}`, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ l(F, { className: `uofg-number-input-field ${E(N(), h)}`, children: [
+    c && /* @__PURE__ */ e(S, { className: "uofg-number-input-label", children: c }),
+    /* @__PURE__ */ l("div", { className: `uofg-number-input-container ${j()}`, children: [
+      /* @__PURE__ */ e("div", { className: `uofg-number-input-wrapper ${v()}`, children: /* @__PURE__ */ e(
         A,
         {
           ...y,
-          ref: s,
-          value: t,
+          ref: i,
+          value: n,
           type: "number",
-          min: i,
-          max: c,
+          min: u,
+          max: a,
           placeholder: x,
-          onInput: (u) => {
-            var m;
-            const r = Number.parseFloat(((m = u == null ? void 0 : u.target) == null ? void 0 : m.value) ?? "");
-            l(r), e == null || e(r, u);
+          onInput: (t) => {
+            var p;
+            const o = Number.parseFloat(((p = t == null ? void 0 : t.target) == null ? void 0 : p.value) ?? "");
+            s(o), r == null || r(o, t);
           },
           className: `uofg-number-input ${$()}`
         }
       ) }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ l(
         "button",
         {
-          className: `uofg-number-input-subtract uog:col-1 uog:row-1 ${b()}`,
+          className: `uofg-number-input-subtract col-1 row-1 ${m()}`,
           onClick: () => {
-            f((t || 0) - 1);
+            b((n || 0) - 1);
           },
           children: [
-            /* @__PURE__ */ o(p, { icon: C }),
-            /* @__PURE__ */ o("span", { className: "uog:sr-only", children: "Subtract" })
+            /* @__PURE__ */ e(d, { icon: C }),
+            /* @__PURE__ */ e("span", { className: "sr-only", children: "Subtract" })
           ]
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ l(
         "button",
         {
-          className: `uofg-number-input-add uog:col-3 uog:row-1 ${b()}`,
+          className: `uofg-number-input-add col-3 row-1 ${m()}`,
           onClick: () => {
-            f((t || 0) + 1);
+            b((n || 0) + 1);
           },
           children: [
-            /* @__PURE__ */ o(p, { icon: k }),
-            /* @__PURE__ */ o("span", { className: "uog:sr-only", children: "Add" })
+            /* @__PURE__ */ e(d, { icon: k }),
+            /* @__PURE__ */ e("span", { className: "sr-only", children: "Add" })
           ]
         }
       )