@uoguelph/react-components 1.0.0-rc.0

package/dist/breadcrumbs.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { twJoin as o, twMerge as a } from "tailwind-merge";
+import { Container as c } from "./container.js";
+import { Breadcrumb as w } from "./breadcrumb.js";
+import { BreadcrumbHome as l } from "./breadcrumb-home.js";
+function n({ className: e, children: t }) {
+  const m = o("tw:flex tw:w-full tw:flex-wrap tw:items-center tw:gap-2");
+  return /* @__PURE__ */ r(c, { centered: !0, children: /* @__PURE__ */ r("ol", { className: a(m, e), children: t }) });
+}
+n.displayName = "Breadcrumbs";
+export {
+  w as Breadcrumb,
+  l as BreadcrumbHome,
+  n as Breadcrumbs
+};

package/dist/button.d.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * The Button component is a interactive component designed to capture user actions (such as submitting forms). It can
+ * also function as a link to another page or resource.
+ */
+export declare function Button<T extends ButtonElementType = typeof defaultElement>({ as, color, outlined, children, className, disabled, ...rest }: ButtonProps<T>): JSX.Element;
+
+export declare namespace Button {
+    var displayName: string;
+}
+
+declare type ButtonElementType = ElementType<{
+    href?: string;
+}, 'a'> | 'button';
+
+export 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 { }

package/dist/button.js

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

package/dist/card-content.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function CardContent({ children, className }: CardContentProps): JSX.Element;
+
+export declare namespace CardContent {
+    var displayName: string;
+}
+
+export declare type CardContentProps = PropsWithChildren<{
+    /** Additional classes to apply to the card content */
+    className?: string;
+}>;
+
+export { }

package/dist/card-content.js

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

package/dist/card-context.d.ts

@@ -0,0 +1,10 @@
+import { Context } from 'react';
+
+export declare const CardContext: Context<CardContextValue | null>;
+
+export declare type CardContextValue = {
+    isLink: boolean;
+    centered: boolean;
+};
+
+export { }

package/dist/card-context.js

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

package/dist/card-footer.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The CardFooter component is used to display additional information or actions at the bottom of a card. */
+export declare function CardFooter({ children, className }: CardFooterProps): JSX.Element;
+
+export declare namespace CardFooter {
+    var displayName: string;
+}
+
+export declare type CardFooterProps = PropsWithChildren<{
+    /** Additional classes to apply to the card footer */
+    className?: string;
+}>;
+
+export { }

package/dist/card-footer.js

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

package/dist/card-image.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+/** The CardImage component is used to display an image within a card. */
+export declare function CardImage<T extends CardImageElementType = typeof defaultCardImageElement>({ as, src, alt, width, height, className, ...rest }: CardImageProps<T>): JSX.Element;
+
+export declare namespace CardImage {
+    var displayName: string;
+}
+
+declare type CardImageElementType = ElementType<{
+    src: string;
+    alt: string;
+    width?: string;
+    height?: string;
+}, 'img'>;
+
+export declare type CardImageProps<T extends CardImageElementType = typeof defaultCardImageElement> = {
+    /**
+     * The element to render the image as
+     *
+     * @default 'img'
+     */
+    as?: T;
+    /** The source URL of the image */
+    src: string;
+    /** An accessible description of the image, used primarily for screen readers */
+    alt: string;
+    /** The width of the image in pixels */
+    width?: string;
+    /** The height of the image in pixels */
+    height?: string;
+    /** Additional classes to apply to the image */
+    className?: string;
+} & ComponentPropsWithoutRef<T>;
+
+declare const defaultCardImageElement = "img";
+
+export { }

package/dist/card-image.js

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

package/dist/card-title.d.ts

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

package/dist/card-title.js

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

package/dist/card.d.ts

@@ -0,0 +1,105 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * The Card component is a container used to group related content like text, images, and actions in a styled, organized
+ * layout
+ */
+export declare function Card<T extends CardElementType = typeof defaultElement>({ as, className, centered, children, ...rest }: CardProps<T>): JSX.Element;
+
+export declare namespace Card {
+    var displayName: string;
+}
+
+export declare function CardContent({ children, className }: CardContentProps): JSX.Element;
+
+export declare namespace CardContent {
+    var displayName: string;
+}
+
+declare type CardContentProps = PropsWithChildren<{
+    /** Additional classes to apply to the card content */
+    className?: string;
+}>;
+
+declare type CardElementType = ElementType<{
+    href?: string;
+}, 'a'> | 'div' | 'article';
+
+/** The CardFooter component is used to display additional information or actions at the bottom of a card. */
+export declare function CardFooter({ children, className }: CardFooterProps): JSX.Element;
+
+export declare namespace CardFooter {
+    var displayName: string;
+}
+
+declare type CardFooterProps = PropsWithChildren<{
+    /** Additional classes to apply to the card footer */
+    className?: string;
+}>;
+
+/** The CardImage component is used to display an image within a card. */
+export declare function CardImage<T extends CardImageElementType = typeof defaultCardImageElement>({ as, src, alt, width, height, className, ...rest }: CardImageProps<T>): JSX.Element;
+
+export declare namespace CardImage {
+    var displayName: string;
+}
+
+declare type CardImageElementType = ElementType<{
+    src: string;
+    alt: string;
+    width?: string;
+    height?: string;
+}, 'img'>;
+
+declare type CardImageProps<T extends CardImageElementType = typeof defaultCardImageElement> = {
+    /**
+     * The element to render the image as
+     *
+     * @default 'img'
+     */
+    as?: T;
+    /** The source URL of the image */
+    src: string;
+    /** An accessible description of the image, used primarily for screen readers */
+    alt: string;
+    /** The width of the image in pixels */
+    width?: string;
+    /** The height of the image in pixels */
+    height?: string;
+    /** Additional classes to apply to the image */
+    className?: string;
+} & ComponentPropsWithoutRef<T>;
+
+export declare type CardProps<T extends CardElementType = typeof defaultElement> = PropsWithChildren<{
+    /** The element to render the card as */
+    as?: T;
+    /** Additional classes to apply to the card */
+    className?: string;
+    /**
+     * Whether the card content should be centered
+     *
+     * @default false
+     */
+    centered?: boolean;
+} & ComponentPropsWithoutRef<T>>;
+
+/** The CardTitle component is used to display a title for a card. */
+export declare function CardTitle({ children, className }: CardTitleProps): JSX.Element;
+
+export declare namespace CardTitle {
+    var displayName: string;
+}
+
+declare type CardTitleProps = PropsWithChildren<{
+    /** Additional classes to apply to the card title */
+    className?: string;
+}>;
+
+declare const defaultCardImageElement = "img";
+
+declare const defaultElement = "div";
+
+export { }

package/dist/card.js

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

package/dist/carousel.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/**
+ * The Carousel component is used to display a series of items in a horizontal row, allowing the user to scroll through
+ * them.
+ */
+export declare function Carousel({ children, display, loop }: CarouselProps): JSX.Element;
+
+export declare type CarouselProps = PropsWithChildren<{
+    /**
+     * The number of items to display at once
+     *
+     * @default 1
+     */
+    display?: number;
+    /**
+     * The looping behavior of the carousel
+     *
+     * @default 'none'
+     */
+    loop?: 'jump' | 'continuous' | 'none';
+}>;
+
+export { }