@uoguelph/react-components 1.0.0-rc.0

package/dist/carousel.js

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

package/dist/checkbox.d.ts

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/** The Checkbox component is used to allow the user to select one or more options from a list of choices. */
+export declare function Checkbox({ checked, label, description, color, disabled, onChange, ...rest }: CheckboxProps): JSX.Element;
+
+export declare namespace Checkbox {
+    var displayName: string;
+}
+
+export declare type CheckboxProps = {
+    /**
+     * Whether the checkbox is checked initially
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /** The label for the checkbox */
+    label?: ReactNode;
+    /** The description for the checkbox */
+    description?: ReactNode;
+    /**
+     * The color of the checkbox
+     *
+     * @default 'red'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green' | 'light-grey' | 'dark-grey' | 'black' | 'white';
+    /**
+     * Whether the checkbox is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The function to call when the checkbox is toggled */
+    onChange?: (value: boolean) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export { }

package/dist/checkbox.js

@@ -0,0 +1,99 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { e as m } from "./regular-CYeGUuiO.js";
+import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { Field as y, Checkbox as v, Label as N, Description as C } from "@headlessui/react";
+import { useState as j } from "react";
+import { tv as F } from "tailwind-variants";
+function z({
+  checked: l = !1,
+  label: c,
+  description: i,
+  color: w = "red",
+  disabled: r = !1,
+  onChange: t,
+  ...a
+}) {
+  const [b, n] = j(l), g = F({
+    slots: {
+      base: "tw:flex tw:flex-col tw:gap-0.5 tw:cursor-pointer",
+      container: "tw:flex tw:items-center tw:gap-2",
+      box: "tw:group tw:rounded tw:flex tw:size-4 tw:items-center tw:justify-center tw:border tw:bg-white tw:p-3 tw:transition-colors tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:focus-visible:outline-none",
+      check: "tw:h-5 tw:w-5 tw:opacity-0 tw:transition-opacity tw:group-ui-checked:opacity-100 tw:user-select-none",
+      label: "tw:text-body-copy",
+      description: "tw:text-sm tw:text-dark-grey"
+    },
+    variants: {
+      color: {
+        red: {
+          box: "tw:focus-visible:ring-red tw:ui-checked:bg-red",
+          check: "tw:text-red-contrast"
+        },
+        yellow: {
+          box: "tw:focus-visible:ring-yellow tw:ui-checked:bg-yellow",
+          check: "tw:text-yellow-contrast"
+        },
+        blue: {
+          box: "tw:focus-visible:ring-blue tw:ui-checked:bg-blue",
+          check: "tw:text-blue-contrast"
+        },
+        green: {
+          box: "tw:focus-visible:ring-green tw:ui-checked:bg-green",
+          check: "tw:text-green-contrast"
+        },
+        "light-grey": {
+          box: "tw:focus-visible:ring-light-grey tw:ui-checked:bg-light-grey",
+          check: "tw:text-light-grey-contrast"
+        },
+        "dark-grey": {
+          box: "tw:focus-visible:ring-dark-grey tw:ui-checked:bg-dark-grey",
+          check: "tw:text-dark-grey-contrast"
+        },
+        black: {
+          box: "tw:focus-visible:ring-black tw:ui-checked:bg-black",
+          check: "tw:text-black-contrast"
+        },
+        white: {
+          box: "tw:focus-visible:ring-white tw:ui-checked:bg-white",
+          check: "tw:text-white-contrast"
+        }
+      },
+      disabled: {
+        true: {
+          base: "tw:opacity-60",
+          label: "tw:text-dark-grey"
+        },
+        false: {}
+      }
+    }
+  }), {
+    base: h,
+    container: d,
+    box: k,
+    check: u,
+    label: x,
+    description: f
+  } = g({ color: w, disabled: r });
+  return /* @__PURE__ */ s(y, { className: h(), children: [
+    /* @__PURE__ */ s("div", { className: d(), children: [
+      /* @__PURE__ */ e(
+        v,
+        {
+          checked: b,
+          onChange: (o) => {
+            n(o), t == null || t(o);
+          },
+          disabled: r,
+          className: k(),
+          ...a,
+          children: /* @__PURE__ */ e(p, { className: u(), icon: m })
+        }
+      ),
+      c && /* @__PURE__ */ e(N, { className: x(), children: c })
+    ] }),
+    i && /* @__PURE__ */ e(C, { className: f(), children: i })
+  ] });
+}
+z.displayName = "Checkbox";
+export {
+  z as Checkbox
+};

package/dist/contact-email.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react/jsx-runtime';
+
+/** The ContactEmail component is used to display an email address. */
+export declare function ContactEmail({ email, className }: ContactEmailProps): JSX.Element;
+
+export declare namespace ContactEmail {
+    var displayName: string;
+}
+
+export declare type ContactEmailProps = {
+    /** Additional classes to apply to the email */
+    className?: string;
+    /** The email address to display */
+    email: string;
+};
+
+export { }

package/dist/contact-email.js

@@ -0,0 +1,21 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { g as c } from "./regular-CYeGUuiO.js";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+import { twMerge as l } from "tailwind-merge";
+import { tv as m } from "tailwind-variants";
+function f({ email: t, className: i }) {
+  const n = m({
+    slots: {
+      container: "tw:flex tw:items-center tw:gap-1",
+      link: "tw:underline tw:decoration-current tw:hocus-visible:decoration-transparent tw:transition-colors tw:text-body-copy-link-on-light tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:focus-visible:outline-none"
+    }
+  }), { container: e, link: r } = n();
+  return /* @__PURE__ */ s("div", { className: l(e(), i), children: [
+    /* @__PURE__ */ o(a, { icon: c }),
+    /* @__PURE__ */ o("a", { className: r(), href: `mailto:${t}`, children: t })
+  ] });
+}
+f.displayName = "ContactEmail";
+export {
+  f as ContactEmail
+};

package/dist/contact-name.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The ContactName component is used to display the name of a contact. */
+export declare function ContactName({ children, className }: ContactNameProps): JSX.Element;
+
+export declare namespace ContactName {
+    var displayName: string;
+}
+
+export declare type ContactNameProps = PropsWithChildren<{
+    /** Additional classes to apply to the name */
+    className?: string;
+}>;
+
+export { }

package/dist/contact-name.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+function n({ children: t, className: o }) {
+  const a = m("tw:text-body-copy-bold tw:font-bold", o);
+  return /* @__PURE__ */ e("span", { className: a, children: t });
+}
+n.displayName = "ContactName";
+export {
+  n as ContactName
+};

package/dist/contact-phone.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react/jsx-runtime';
+
+/** The ContactPhone component is used to display a phone number. */
+export declare function ContactPhone({ number, extension, className }: ContactPhoneProps): JSX.Element;
+
+export declare namespace ContactPhone {
+    var displayName: string;
+}
+
+export declare type ContactPhoneProps = {
+    /** Additional classes to apply to the phone number */
+    className?: string;
+    /** The phone number to display */
+    number: string;
+    /** The phone number extension to display */
+    extension?: string;
+};
+
+export { }

package/dist/contact-phone.js

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { d as a } from "./solid-DM6GVhkF.js";
+import { FontAwesomeIcon as l } from "@fortawesome/react-fontawesome";
+import { twMerge as f } from "tailwind-merge";
+import { tv as m } from "tailwind-variants";
+function w({ number: t, extension: o, className: i }) {
+  const r = m({
+    slots: {
+      container: "tw:flex tw:items-center tw:gap-1",
+      link: "tw:underline tw:decoration-current tw:hocus-visible:decoration-transparent tw:transition-colors tw:text-body-copy-link-on-light tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2 tw:focus-visible:outline-none"
+    }
+  }), { container: s, link: c } = r();
+  return /* @__PURE__ */ n("div", { className: f(s(), i), children: [
+    /* @__PURE__ */ e(l, { icon: a }),
+    /* @__PURE__ */ e("a", { className: c(), href: `tel:${t}`, children: t }),
+    o && /* @__PURE__ */ n("span", { children: [
+      " - Ext. ",
+      o
+    ] })
+  ] });
+}
+w.displayName = "ContactPhone";
+export {
+  w as ContactPhone
+};

package/dist/contact-title.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The ContactTitle component is used to display a title for a contact. */
+export declare function ContactTitle({ children, className }: ContactTitleProps): JSX.Element;
+
+export declare namespace ContactTitle {
+    var displayName: string;
+}
+
+export declare type ContactTitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the title */
+    className?: string;
+}>;
+
+export { }

package/dist/contact-title.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { twMerge as a } from "tailwind-merge";
+function i({ children: t, className: o }) {
+  const e = a("tw:text-body-copy", o);
+  return /* @__PURE__ */ r("span", { className: e, children: t });
+}
+i.displayName = "ContactTitle";
+export {
+  i as ContactTitle
+};

package/dist/contact.d.ts

@@ -0,0 +1,73 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * The Contact component is a container used to group contact information like name, title, phone number, and email
+ * address in a styled, organized layout
+ */
+export declare function Contact({ children, className }: ContactProps): JSX.Element;
+
+export declare namespace Contact {
+    var displayName: string;
+}
+
+/** The ContactEmail component is used to display an email address. */
+export declare function ContactEmail({ email, className }: ContactEmailProps): JSX.Element;
+
+export declare namespace ContactEmail {
+    var displayName: string;
+}
+
+declare type ContactEmailProps = {
+    /** Additional classes to apply to the email */
+    className?: string;
+    /** The email address to display */
+    email: string;
+};
+
+/** The ContactName component is used to display the name of a contact. */
+export declare function ContactName({ children, className }: ContactNameProps): JSX.Element;
+
+export declare namespace ContactName {
+    var displayName: string;
+}
+
+declare type ContactNameProps = PropsWithChildren<{
+    /** Additional classes to apply to the name */
+    className?: string;
+}>;
+
+/** The ContactPhone component is used to display a phone number. */
+export declare function ContactPhone({ number, extension, className }: ContactPhoneProps): JSX.Element;
+
+export declare namespace ContactPhone {
+    var displayName: string;
+}
+
+declare type ContactPhoneProps = {
+    /** Additional classes to apply to the phone number */
+    className?: string;
+    /** The phone number to display */
+    number: string;
+    /** The phone number extension to display */
+    extension?: string;
+};
+
+export declare type ContactProps = PropsWithChildren<{
+    /** Additional classes to apply to the contact */
+    className?: string;
+}>;
+
+/** The ContactTitle component is used to display a title for a contact. */
+export declare function ContactTitle({ children, className }: ContactTitleProps): JSX.Element;
+
+export declare namespace ContactTitle {
+    var displayName: string;
+}
+
+declare type ContactTitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the title */
+    className?: string;
+}>;
+
+export { }

package/dist/contact.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { twMerge as a } from "tailwind-merge";
+import { ContactEmail as x } from "./contact-email.js";
+import { ContactName as l } from "./contact-name.js";
+import { ContactPhone as C } from "./contact-phone.js";
+import { ContactTitle as s } from "./contact-title.js";
+function c({ children: t, className: o }) {
+  const e = a("tw:bg-light-grey-bg tw:mb-2 tw:flex tw:flex-col tw:p-4 tw:text-body-copy", o);
+  return /* @__PURE__ */ r("div", { className: e, children: t });
+}
+c.displayName = "Contact";
+export {
+  c as Contact,
+  x as ContactEmail,
+  l as ContactName,
+  C as ContactPhone,
+  s as ContactTitle
+};

package/dist/container.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The Container component is a layout component that wraps content and applies padding and max-width styles. */
+export declare function Container<T extends ElementType = typeof defaultElement>({ as, centered, children, className, ...rest }: ContainerProps<T>): JSX.Element;
+
+export declare namespace Container {
+    var displayName: string;
+}
+
+export declare type ContainerProps<T extends ElementType = typeof defaultElement> = PropsWithChildren<ContainerPropsAs<T> & ComponentPropsWithoutRef<T> & ContainerPropsBase>;
+
+declare type ContainerPropsAs<T extends ElementType> = {
+    as?: T;
+};
+
+declare type ContainerPropsBase = {
+    /**
+     * Whether the container content should be horizontally centered
+     *
+     * @default false
+     */
+    centered?: boolean;
+    /** Additional classes to apply to the container */
+    className?: string;
+};
+
+declare const defaultElement = "div";
+
+export { }

package/dist/container.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { twMerge as s } from "tailwind-merge";
+import { tv as w } from "tailwind-variants";
+const c = "div";
+function p({
+  as: t,
+  centered: e = !1,
+  children: n,
+  className: o,
+  ...r
+}) {
+  const a = t ?? c, m = w({
+    base: "tw:max-w-[--tw-max-content-width] tw:container tw:px-4 tw:pt-2 tw:pb-4",
+    variants: {
+      centered: {
+        true: "tw:mx-auto"
+      }
+    }
+  });
+  return /* @__PURE__ */ i(a, { ...r, className: s(m({ centered: e }), o), children: n });
+}
+p.displayName = "Container";
+export {
+  p as Container
+};

package/dist/divider.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react/jsx-runtime';
+
+/** Separates content on a page visually */
+export declare const Divider: () => JSX.Element;
+
+export { }

package/dist/divider.js

@@ -0,0 +1,30 @@
+import { jsxs as e, Fragment as c, jsx as l } from "react/jsx-runtime";
+import { tv as d } from "tailwind-variants";
+const b = () => {
+  const s = d({
+    slots: {
+      base: "tw:mx-auto tw:my-7 tw:h-1 tw:w-3/4 tw:border-0 tw:flex",
+      red: "tw:bg-red",
+      yellow: "tw:bg-yellow",
+      black: "tw:bg-black",
+      hr: "tw:border-0"
+    },
+    compoundSlots: [
+      {
+        slots: ["red", "yellow", "black"],
+        class: "tw:flex-1 tw:h-full"
+      }
+    ]
+  }), { base: t, red: r, yellow: o, black: a, hr: w } = s();
+  return /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ e("div", { className: t(), children: [
+      /* @__PURE__ */ l("div", { className: a() }),
+      /* @__PURE__ */ l("div", { className: r() }),
+      /* @__PURE__ */ l("div", { className: o() })
+    ] }),
+    /* @__PURE__ */ l("hr", { className: w() })
+  ] });
+};
+export {
+  b as Divider
+};

package/dist/embedded-video-context.d.ts

@@ -0,0 +1,10 @@
+import { Context } from 'react';
+
+export declare const EmbeddedVideoContext: Context<EmbeddedVideoContextType | null>;
+
+export declare type EmbeddedVideoContextType = {
+    modalOpen: boolean;
+    setModalOpen: (open: boolean) => void;
+};
+
+export { }

package/dist/embedded-video-context.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+const o = e(null);
+export {
+  o as EmbeddedVideoContext
+};

package/dist/embedded-video-modal-button.d.ts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare type ButtonElementType = ElementType<{
+    href?: string;
+}, 'a'> | 'button';
+
+declare type ButtonProps<T extends ButtonElementType = typeof defaultElement> = PropsWithChildren<ButtonPropsAs<T> & ComponentPropsWithoutRef<T> & ButtonPropsBase>;
+
+declare type ButtonPropsAs<T extends ButtonElementType> = {
+    as?: T;
+};
+
+declare type ButtonPropsBase = {
+    /**
+     * The color of the button
+     *
+     * @default 'red'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green' | 'light-grey' | 'dark-grey' | 'black' | 'white';
+    /**
+     * Whether the button should be outlined
+     *
+     * @default false
+     */
+    outlined?: boolean;
+    /** Additional classes to apply to the button */
+    className?: string;
+    /**
+     * Whether the button is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare const defaultElement = "button";
+
+export declare function EmbeddedVideoModalButton({ type, children, className }: EmbeddedVideoModalButtonProps): JSX.Element;
+
+export declare namespace EmbeddedVideoModalButton {
+    var displayName: string;
+}
+
+declare type EmbeddedVideoModalButtonProps = PropsWithChildren<{
+    /** The type of button to render, either a play button or a color which will be passed to a Button component */
+    type: 'play-button' | ButtonProps['color'];
+    /** Additional classes to apply to the button */
+    className?: string;
+}>;
+
+export { }