@uoguelph/react-components 1.0.0-rc.0

package/dist/link-carousel.d.ts

@@ -0,0 +1,83 @@
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "a";
+
+/**
+ * The LinkCarousel component is used to display a column of links that change the content that is displayed once the
+ * user hovers on a link. The content must have a defined height otherwise the component will not work as expected.
+ * Content should be limited to purely decoration, as the link carousel does not display its content on mobile devices,
+ * and is not focus friendly. If your content doesn't match this criteria, use the Carousel component instead, or find
+ * another way to display your content.
+ */
+export declare function LinkCarousel({ children, className, stack, direction }: LinkCarouselProps): JSX.Element;
+
+export declare namespace LinkCarousel {
+    var displayName: string;
+}
+
+export declare function LinkCarouselContent({ children, className }: LinkCarouselContentProps): JSX.Element;
+
+declare type LinkCarouselContentProps = PropsWithChildren<{
+    /** Additional classes to apply to the link carousel content container. */
+    className?: string;
+}>;
+
+declare type LinkCarouselId = string | number;
+
+export declare function LinkCarouselItem({ id, children, className }: LinkCarouselItemProps): JSX.Element;
+
+declare type LinkCarouselItemProps = PropsWithChildren<{
+    /** The unique identifier for the link carousel item. */
+    id: LinkCarouselId;
+    /** Additional classes to apply to the link carousel item */
+    className?: string;
+}>;
+
+export declare function LinkCarouselLink<T extends LinkCarouselLinkElementType = typeof defaultElement>({ as, id, children, className, href, ...rest }: LinkCarouselLinkProps<T>): JSX.Element;
+
+export declare namespace LinkCarouselLink {
+    var displayName: string;
+}
+
+declare type LinkCarouselLinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+declare type LinkCarouselLinkProps<T extends LinkCarouselLinkElementType = typeof defaultElement> = PropsWithChildren<{
+    /**
+     * The element type to render as.
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The id of the link, this is used to determine which carousel item is controlled by this link. */
+    id: LinkCarouselId;
+    /** The URL this links to. */
+    href: string;
+    /** Additional classes to apply to the link. */
+    className?: string;
+}>;
+
+export declare function LinkCarouselLinks({ children, className }: LinkCarouselLinksProps): JSX.Element;
+
+declare type LinkCarouselLinksProps = PropsWithChildren<{
+    /** Additional classes to apply to the link carousel links. */
+    className?: string;
+}>;
+
+export declare type LinkCarouselProps = PropsWithChildren<{
+    /** Additional classes to apply to the link carousel. */
+    className?: string;
+    /** Whether the carousel links should stack on top of the content, rather than beside it. */
+    stack?: boolean;
+    /**
+     * The side of the carousel that the links should be displayed on.
+     *
+     * @default 'left'
+     */
+    direction?: 'left' | 'right';
+}>;
+
+export { }

package/dist/link-carousel.js

@@ -0,0 +1,57 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useMemo as p, useState as d, useRef as v, Children as k, isValidElement as w } from "react";
+import { twMerge as C } from "tailwind-merge";
+import { tv as I } from "tailwind-variants";
+import { LinkCarouselContext as L } from "./link-carousel-context.js";
+import { LinkCarouselLink as x } from "./link-carousel-link.js";
+import { LinkCarouselContent as F } from "./link-carousel-content.js";
+import { LinkCarouselItem as S } from "./link-carousel-item.js";
+import { LinkCarouselLinks as $ } from "./link-carousel-links.js";
+function A(r) {
+  let t = null;
+  function o(i) {
+    k.forEach(i, (e) => {
+      if (t) return;
+      const n = w(e);
+      n && e.type === x ? t = e.props.id : n && e.props.children && o(e.props.children);
+    });
+  }
+  return o(r), t;
+}
+function h({ children: r, className: t, stack: o = !1, direction: i = "left" }) {
+  const e = p(() => A(r), [r]), [n, l] = d(e), s = v(null), f = (c) => {
+    l((m) => (s.current = m, c));
+  }, a = I({
+    base: "tw:flex tw:w-full tw:relative tw:h-fit tw:overflow-hidden",
+    variants: {
+      direction: {
+        left: "tw:flex-row",
+        right: "tw:flex-row-reverse"
+      }
+    }
+  });
+  return /* @__PURE__ */ u("div", { className: `uofg-link-carousel ${C(a({ direction: i }), t)}`, children: /* @__PURE__ */ u(
+    L.Provider,
+    {
+      value: {
+        previousActiveId: s.current,
+        activeId: n,
+        setActiveId: f,
+        stack: o ?? !1,
+        direction: i,
+        clearPreviousActiveId: () => {
+          s.current = null;
+        }
+      },
+      children: r
+    }
+  ) });
+}
+h.displayName = "LinkCarousel";
+export {
+  h as LinkCarousel,
+  F as LinkCarouselContent,
+  S as LinkCarouselItem,
+  x as LinkCarouselLink,
+  $ as LinkCarouselLinks
+};

package/dist/link.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "a";
+
+export declare function Link<T extends LinkElementType = typeof defaultElement>({ as, href, color, children, className, ...rest }: LinkProps<T>): JSX.Element;
+
+export declare namespace Link {
+    var displayName: string;
+}
+
+declare type LinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare type LinkProps<T extends LinkElementType = typeof defaultElement> = PropsWithChildren<LinkPropsAs<T> & ComponentPropsWithoutRef<T> & LinkPropsBase>;
+
+declare type LinkPropsAs<T extends LinkElementType> = {
+    as?: T;
+};
+
+declare type LinkPropsBase = {
+    href: string;
+    color?: 'base' | 'light' | 'dark';
+    className?: string;
+};
+
+export { }

package/dist/link.js

@@ -0,0 +1,28 @@
+import { jsx as c } from "react/jsx-runtime";
+import { twMerge as a } from "tailwind-merge";
+import { tv as w } from "tailwind-variants";
+const b = "a";
+function p({
+  as: t,
+  href: o,
+  color: i = "base",
+  children: n,
+  className: e,
+  ...r
+}) {
+  const s = t ?? b, l = w({
+    base: "tw:inline-flex tw:gap-[1em] tw:underline tw:decoration-current tw:transition-colors tw:hover:decoration-transparent tw:focus:ring-2 tw:focus-visible:ring-offset-2 tw:focus-visible:outline-none tw:text-body-copy-link",
+    variants: {
+      color: {
+        base: "tw:text-body-copy-link tw:focus-visible:ring-body-copy-link",
+        light: "tw:text-body-copy-link-on-light tw:focus-visible:ring-body-copy-link-on-light",
+        dark: "tw:text-body-copy-link-on-dark tw:focus-visible:ring-body-copy-link-on-light"
+      }
+    }
+  });
+  return /* @__PURE__ */ c(s, { ...r, href: o, className: a(l({ color: i }), e), children: n });
+}
+p.displayName = "Link";
+export {
+  p as Link
+};

package/dist/list-item.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** A list item component. */
+export declare function ListItem({ className, children, ...rest }: ListItemProps): JSX.Element;
+
+export declare namespace ListItem {
+    var displayName: string;
+}
+
+declare type ListItemProps = PropsWithChildren<{
+    /** Additional classes to apply to the list item. */
+    className?: string;
+} & ComponentPropsWithoutRef<'li'>>;
+
+export { }

package/dist/list-item.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+function l({ className: t, children: e, ...i }) {
+  return /* @__PURE__ */ r("li", { ...i, className: m("tw:relative tw:h-fit tw:w-full", t), children: e });
+}
+l.displayName = "ListItem";
+export {
+  l as ListItem
+};

package/dist/list.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "ul";
+
+/** A list component. */
+export declare function List<T extends ListElementType = typeof defaultElement>({ as, children, className, ...rest }: ListProps<T>): JSX.Element;
+
+export declare namespace List {
+    var displayName: string;
+}
+
+declare type ListElementType = 'ul' | 'ol';
+
+/** A list item component. */
+export declare function ListItem({ className, children, ...rest }: ListItemProps): JSX.Element;
+
+export declare namespace ListItem {
+    var displayName: string;
+}
+
+declare type ListItemProps = PropsWithChildren<{
+    /** Additional classes to apply to the list item. */
+    className?: string;
+} & ComponentPropsWithoutRef<'li'>>;
+
+export declare type ListProps<T extends ListElementType = typeof defaultElement> = PropsWithChildren<{
+    /**
+     * The element type to render as.
+     *
+     * @default 'ul'
+     */
+    as?: T;
+    /** Additional classes to apply to the list. */
+    className?: string;
+} & ComponentPropsWithoutRef<T>>;
+
+export { }

package/dist/list.js

@@ -0,0 +1,31 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as a, useContext as c } from "react";
+import { twMerge as f } from "tailwind-merge";
+import { tv as w } from "tailwind-variants";
+import { ListItem as g } from "./list-item.js";
+const d = "ul", o = a(null);
+function p({
+  as: i,
+  children: l,
+  className: n,
+  ...r
+}) {
+  const e = i ?? d, t = c(o), m = w({
+    base: "tw:flex tw:flex-col tw:relative tw:h-fit tw:w-full tw:list-inside tw:gap-2",
+    variants: {
+      as: {
+        ol: "tw:list-decimal",
+        ul: "tw:list-disc"
+      },
+      nested: {
+        true: "tw:ml-4"
+      }
+    }
+  });
+  return /* @__PURE__ */ s(e, { ...r, className: f(m({ as: e, nested: t == null ? void 0 : t.nested }), n), children: /* @__PURE__ */ s(o.Provider, { value: { nested: typeof t == "object" }, children: l }) });
+}
+p.displayName = "List";
+export {
+  p as List,
+  g as ListItem
+};

package/dist/loading-indicator.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react/jsx-runtime';
+
+/** A component which can be used as a placeholder while content is loading */
+export declare function LoadingIndicator({ size, color, className }: LoadingIndicatorProps): JSX.Element;
+
+export declare type LoadingIndicatorProps = {
+    /**
+     * The size of the loading indicator
+     *
+     * @default 'lg'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The color of the loading indicator
+     *
+     * @default 'red'
+     */
+    color?: 'blue' | 'red' | 'green' | 'yellow';
+    /** Additional classes to add the loading indicator */
+    className?: string;
+};
+
+export { }

package/dist/loading-indicator.js

@@ -0,0 +1,75 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { h as w } from "./regular-CYeGUuiO.js";
+import { FontAwesomeIcon as n } from "@fortawesome/react-fontawesome";
+import { twMerge as g } from "tailwind-merge";
+import { tv as m } from "tailwind-variants";
+var h = {
+  prefix: "fak",
+  iconName: "gryphon-statue",
+  icon: [
+    512,
+    512,
+    [],
+    "e002",
+    "M166.4 257.6c-25.6-19.2-43.2-38.4-43.2-38.4s0 33.6-43.2 33.6H46.4c-14.4 0-24 9.6-24 20.8v9.6c0 4.8 4.8 9.6 9.6 9.6h180.8s3.2-1.6 0-3.2c-9.6-8-30.4-22.4-46.4-32zm38.4-62.4c9.6 0 17.6 1.6 25.6 4.8 3.2-17.6 6.4-35.2 1.6-46.4L200 51.2l-19.2 72-38.4 12.8-57.6-48 32 102.4c3.2 11.2 16 24 30.4 36.8 12.8-19.2 33.6-33.6 57.6-32zm-9.6-44.8c4.8-1.6 11.2 1.6 12.8 6.4 1.6 4.8-1.6 11.2-6.4 12.8-4.8 1.6-11.2-1.6-12.8-6.4-1.6-4.8 1.6-11.2 6.4-12.8zm-48 14.4c4.8-1.6 11.2 1.6 12.8 6.4 1.6 4.8-1.6 11.2-6.4 12.8s-11.2-1.6-12.8-6.4 1.6-11.2 6.4-12.8zm81.6 46.4c-6.4-3.2-14.4-4.8-22.4-4.8-20.8 0-40 11.2-49.6 28.8C180.8 256 208 272 208 272s12.8-30.4 20.8-60.8zm1.6-112C256 70.4 224 48 232 17.6c9.6-35.2 86.4-9.6 99.2-3.2 73.6 35.2 112 89.6 112 89.6s27.2 33.6-1.6 25.6c-16-4.8-49.6-27.2-83.2-38.4-35.2-9.6-75.2 0-89.6 24-38.4 62.4 1.6 102.4 1.6 102.4s6.4 6.4 14.4 12.8c6.4 4.8 17.6 9.6 17.6 9.6h-72s16-44.8 16-81.6c0-12.8-20.8-54.4-16-59.2zm267.2 291.2h-11.2v-68.8h11.2c6.4 0 11.2-4.8 11.2-11.2 0-6.4-4.8-11.2-11.2-11.2h-14.4c-9.6 6.4-20.8 11.2-32 11.2H400c-19.2 0-35.2 14.4-35.2 30.4 0 22.4-9.6 44.8-27.2 60.8-6.4 4.8-12.8 9.6-19.2 12.8h180.8c6.4 0 11.2-4.8 11.2-11.2-1.6-6.4-6.4-12.8-12.8-12.8zm-264-86.4c-4.8 0-8-1.6-11.2-3.2l-3.2 3.2-1.6 1.6h-184c-4.8 0-9.6-1.6-14.4-4.8h-8C4.8 300.8 0 305.6 0 312c0 6.4 4.8 11.2 11.2 11.2h11.2V392H11.2C4.8 392 0 396.8 0 403.2c0 6.4 4.8 11.2 11.2 11.2h211.2c-28.8-14.4-48-41.6-48-73.6 0-16 12.8-28.8 28.8-28.8s28.8 12.8 28.8 28.8v1.6c0 16 16 28.8 35.2 28.8 19.2 0 35.2-14.4 35.2-30.4 0-12.8 3.2-25.6 9.6-36.8h-78.4zm216-94.4h-6.4C422.4 96 331.2 100.8 320 100.8c-41.6 8-57.6 38.4-54.4 76.8 3.2 48 59.2 65.6 92.8 65.6 3.2 0 6.4 3.2 6.4 6.4s-1.6 6.4-4.8 6.4H246.4c-11.2 0-20.8 9.6-20.8 20.8v9.6c0 4.8 4.8 9.6 9.6 9.6h89.6c17.6-22.4 44.8-36.8 76.8-36.8h49.6V256c0-4.8 0-9.6-1.6-14.4h3.2c4.8 0 9.6 6.4 9.6 14.4s-4.8 14.4-9.6 14.4H400c-46.4 0-81.6 33.6-81.6 73.6 0 24-20.8 41.6-48 41.6s-48-19.2-48-41.6c0-9.6-8-17.6-17.6-17.6-9.6 0-17.6 8-17.6 17.6 0 40 36.8 73.6 81.6 73.6s81.6-33.6 81.6-73.6c0-24 20.8-41.6 48-41.6h52.8c24 0 41.6-20.8 41.6-44.8 0-28.8-19.2-48-43.2-48z"
+  ]
+};
+function T({ size: o = "lg", color: c = "red", className: i }) {
+  const a = m({
+    slots: {
+      base: "tw:flex tw:flex-col tw:items-center tw:justify-center",
+      icon: "",
+      container: "tw:flex tw:items-center tw:gap-2",
+      spinner: "tw:w-[1em] tw:animate-spin",
+      loadingText: "tw:font-condensed tw:text-3xl"
+    },
+    variants: {
+      size: {
+        sm: {
+          icon: "tw:text-4xl",
+          loadingText: "tw:text-lg"
+        },
+        md: {
+          icon: "tw:text-6xl",
+          loadingText: "tw:text-xl"
+        },
+        lg: {
+          icon: "tw:text-9xl",
+          loadingText: "tw:text-2xl"
+        }
+      },
+      color: {
+        red: {
+          icon: "tw:text-red",
+          spinner: "tw:text-red",
+          loadingText: "tw:text-red"
+        },
+        blue: {
+          icon: "tw:text-blue",
+          spinner: "tw:text-blue",
+          loadingText: "tw:text-blue"
+        },
+        green: {
+          icon: "tw:text-green",
+          spinner: "tw:text-green",
+          loadingText: "tw:text-green"
+        },
+        yellow: {
+          icon: "tw:text-yellow",
+          spinner: "tw:text-yellow",
+          loadingText: "tw:text-yellow"
+        }
+      }
+    }
+  }), { base: l, icon: r, container: s, spinner: x, loadingText: d } = a({ size: o, color: c });
+  return /* @__PURE__ */ e("div", { className: `uofg-loading-indicator ${g(l(), i)}`, children: [
+    /* @__PURE__ */ t(n, { className: `uofg-loading-indicator-icon ${r()}`, icon: h }),
+    /* @__PURE__ */ e("div", { className: `uofg-loading-indicator-container ${s()}`, children: [
+      /* @__PURE__ */ t(n, { className: `uofg-loading-indicator-spinner ${x()}`, icon: w }),
+      /* @__PURE__ */ t("span", { className: `uofg-loading-indicator-loading-text ${d()}`, children: "Loading" })
+    ] })
+  ] });
+}
+export {
+  T as LoadingIndicator
+};

package/dist/math-utils-BwzyIQRL.js

@@ -0,0 +1,50 @@
+function R(o, r, a) {
+  return Math.max(Math.min(o, r), Math.min(o, a));
+}
+function S(o, r) {
+  return (o % r + r) % r;
+}
+function g(o, r, a) {
+  return o + a * (r - o);
+}
+function j(o, r, a, b, w) {
+  function l(n, e, t) {
+    return 3 * Math.pow(1 - n, 2) * n * e + 3 * (1 - n) * Math.pow(n, 2) * t + Math.pow(n, 3);
+  }
+  function k(n, e, t) {
+    return 3 * Math.pow(1 - n, 2) * e + 6 * (1 - n) * n * (t - e) + 3 * Math.pow(n, 2) * (1 - t);
+  }
+  function V(n, e, t, u, s, c) {
+    for (let h = 0; h < s; h++) {
+      const i = k(e, t, u);
+      if (Math.abs(i) > c) {
+        const f = l(e, t, u) - n;
+        if (e -= f / i, f === 0)
+          break;
+      } else
+        break;
+    }
+    return e;
+  }
+  function z(n, e, t, u, s, c, h) {
+    let i = e, f = l(e, u, s) - n;
+    for (let m = 0; m < c; m++) {
+      i = (e + t) / 2;
+      const M = l(i, u, s) - n;
+      if (Math.abs(M) <= h)
+        break;
+      M < 0 == f < 0 ? (e = i, f = M) : t = i;
+    }
+    return i;
+  }
+  if (o === 0 || o === 1)
+    return o;
+  let p = z(o, 0, 1, r, b, 4, 1e-4);
+  return p = V(o, p, r, b, 4, 1e-3), l(p, a, w);
+}
+export {
+  j as b,
+  R as c,
+  g as l,
+  S as m
+};

package/dist/media-caption.d.ts

@@ -0,0 +1,110 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactElement } 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";
+
+declare const defaultElement_2 = "img";
+
+/**
+ * The EmbeddedVideo component is used for embedding videos from YouTube and Vimeo. It can be used to render a video
+ * directly or as a modal.
+ */
+declare function EmbeddedVideo({ src, title, transcript, className, children }: EmbeddedVideoProps): JSX.Element;
+
+declare namespace EmbeddedVideo {
+    var displayName: string;
+}
+
+declare function EmbeddedVideoModalButton({ type, children, className }: EmbeddedVideoModalButtonProps): JSX.Element;
+
+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;
+}>;
+
+declare type EmbeddedVideoProps = VideoProps & {
+    /** If passed the video will render as a modal, with the button being used to open the video. */
+    children?: ReactElement<typeof EmbeddedVideoModalButton>;
+};
+
+export declare function MediaCaption<T extends MediaCaptionElementType = typeof defaultElement_2>({ as, size, position, background, children, src, className, mediaClassName, ...rest }: MediaCaptionProps<T>): JSX.Element;
+
+export declare namespace MediaCaption {
+    var displayName: string;
+}
+
+declare type MediaCaptionElementType = ElementType<{
+    src: string;
+    alt?: string;
+    height?: number;
+    width?: number;
+}, 'img'> | typeof EmbeddedVideo;
+
+export declare type MediaCaptionProps<T extends MediaCaptionElementType = typeof defaultElement_2> = PropsWithChildren<MediaCaptionPropsAs<T> & ComponentPropsWithoutRef<T> & MediaCaptionPropsBase>;
+
+declare type MediaCaptionPropsAs<T extends MediaCaptionElementType> = {
+    as?: T;
+};
+
+declare type MediaCaptionPropsBase = {
+    size?: 'small' | 'medium' | 'large';
+    position?: 'left' | 'right' | 'above';
+    background?: 'none' | 'light-grey' | 'dark-grey';
+    className?: string;
+    mediaClassName?: string;
+};
+
+declare type VideoProps = {
+    /** The URL of the video to embed. */
+    src: string;
+    /** The title of the video. */
+    title?: string;
+    /** The URL to a human readable transcript of the video. */
+    transcript?: string;
+    /** Additional classes to apply to the video container. */
+    className?: string;
+};
+
+export { }