@uoguelph/react-components 1.10.0-rc.2 → 1.10.0-rc.4

package/dist/components/toaster/toaster.d.ts

@@ -1,5 +1,19 @@
-import { ReactNode } from 'react';
-export declare const useToaster: () => import('./toaster-context').ToastContextValue;
-export declare function ToasterProvider({ children }: {
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+export type Toast = {
+    message: string;
+    type: 'error' | 'success' | 'info' | 'warning';
+    id: string;
+    timeout: number;
+};
+declare function removeToast(id: string): void;
+declare function addToast(message: Toast['message'], type?: Toast['type'], timeout?: Toast['timeout']): void;
+export declare function useToaster(): Toast[];
+export declare const toast: {
+    add: typeof addToast;
+    remove: typeof removeToast;
+    info: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    success: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    warning: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    error: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+};
+export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.browser-E4KzWirf.js

@@ -0,0 +1,9 @@
+let n = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", r = (t = 21) => {
+  let e = "", l = crypto.getRandomValues(new Uint8Array(t |= 0));
+  for (; t--; )
+    e += n[l[t] & 63];
+  return e;
+};
+export {
+  r as n
+};

package/dist/pagination.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { h as x } from "./solid-CpJcQLq3.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { h as v } from "./solid-CpJcQLq3.js";
 import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
-import { useState as N, useEffect as V } from "react";
-import { twMerge as q } from "tailwind-merge";
-import { tv as B } from "tailwind-variants";
-import { c as w } from "./math-utils-CnAd98v6.js";
-import { Button as F } from "./button.js";
-import { NumberInput as G } from "./number-input.js";
-var U = {
+import { n as q } from "./index.browser-E4KzWirf.js";
+import { useState as x, useEffect as B } from "react";
+import { twMerge as F } from "tailwind-merge";
+import { tv as G } from "tailwind-variants";
+import { c as N } from "./math-utils-CnAd98v6.js";
+import { Button as V } from "./button.js";
+import { NumberInput as _ } from "./number-input.js";
+var D = {
   prefix: "fad",
   iconName: "chevrons-right",
   icon: [
@@ -18,7 +19,7 @@ var U = {
     "f324",
     ["M32 448c0 8.2 3.1 16.4 9.4 22.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192C80.4 35.1 72.2 32 64 32s-16.4 3.1-22.6 9.4c-12.5 12.5-12.5 32.8 0 45.3L210.7 256 41.4 425.4C35.1 431.6 32 439.8 32 448z", "M470.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 256 233.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"]
   ]
-}, _ = {
+}, H = {
   prefix: "fad",
   iconName: "chevrons-left",
   icon: [
@@ -29,53 +30,47 @@ var U = {
     ["M224 256c0 8.2 3.1 16.4 9.4 22.6l192 192c6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4c12.5-12.5 12.5-32.8 0-45.3L301.3 256 470.6 86.6c12.5-12.5 12.5-32.8 0-45.3C464.4 35.1 456.2 32 448 32s-16.4 3.1-22.6 9.4l-192 192c-6.2 6.2-9.4 14.4-9.4 22.6z", "M41.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l192-192c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 256 278.6 425.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-192-192z"]
   ]
 };
-let D = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", H = (i = 21) => {
-  let e = "", m = crypto.getRandomValues(new Uint8Array(i |= 0));
-  for (; i--; )
-    e += D[m[i] & 63];
-  return e;
-};
-function re({
-  page: i,
+function se({
+  page: d,
   count: e,
-  visible: m,
-  defaultPage: b,
+  visible: w,
+  defaultPage: h,
   onChange: P,
-  color: d = "yellow",
+  color: m = "yellow",
   hideInput: C = !1,
   hideList: k = !1,
   className: $
 }) {
-  const [r, I] = N(b ?? 0), [L, M] = N(b ?? 0), j = [...Array(e).keys()], o = Math.max(Math.ceil(m), 3), y = H();
-  V(() => {
-    c(i ?? 0);
-  }, [i]);
-  const c = (s) => {
-    const u = w(s, 0, e - 1);
-    P?.(u), I(u);
-  }, h = (s) => {
-    const u = r === s;
-    return /* @__PURE__ */ l(
+  const [s, I] = x(h ?? 0), [L, M] = x(h ?? 0), j = [...Array(e).keys()], o = Math.max(Math.ceil(w), 3), b = q();
+  B(() => {
+    l(d ?? 0);
+  }, [d]);
+  const l = (r) => {
+    const g = N(r, 0, e - 1);
+    P?.(g), I(g);
+  }, u = (r) => {
+    const g = s === r;
+    return /* @__PURE__ */ n(
       "button",
       {
-        className: `uofg-pagination-item ${W({ active: u })}`,
+        className: `uofg-pagination-item ${W({ active: g })}`,
         onClick: () => {
-          c(s);
+          l(r);
         },
         children: [
           /* @__PURE__ */ t("span", { className: "sr-only", children: "Page" }),
           " ",
-          s + 1,
+          r + 1,
           " ",
-          u ? /* @__PURE__ */ t("span", { className: "sr-only", children: "(Current Page)" }) : ""
+          g ? /* @__PURE__ */ t("span", { className: "sr-only", children: "(Current Page)" }) : ""
         ]
       },
-      s
+      r
     );
   };
-  let a, n, p, g;
-  e <= o || e < 5 ? (a = 1, n = e - 1, p = !1, g = !1) : r < o - 1 ? (a = 1, n = o, g = !0, p = !1) : r > e - o ? (a = e - o, n = e - 1, p = !0, g = !1) : (a = r - Math.floor(o / 2), n = a + o, p = a > 1, g = n < e);
-  const { base: A, list: E, seperator: R, control: v, item: W, inputWrapper: z, goTo: S, input: T } = B({
+  let i, a, c, p;
+  e <= o || e < 5 ? (i = 1, a = e - 1, c = !1, p = !1) : s < o - 1 ? (i = 1, a = o, p = !0, c = !1) : s > e - o ? (i = e - o, a = e - 1, c = !0, p = !1) : (i = s - Math.floor(o / 2), a = i + o, c = i > 1, p = a < e);
+  const { base: z, list: E, seperator: A, control: y, item: W, inputWrapper: R, goTo: S, input: T } = G({
     slots: {
       base: "flex w-full flex-col items-center justify-center gap-4 md:flex-row",
       list: "flex items-center justify-center gap-4",
@@ -148,67 +143,67 @@ function re({
       }
     ]
   })({
-    color: d ?? "yellow",
+    color: m ?? "yellow",
     hideList: k ?? !1,
     hideInput: C ?? !1
   });
-  return /* @__PURE__ */ l("div", { className: `uofg-pagination ${q(A(), $)}`, children: [
-    /* @__PURE__ */ t("a", { href: `#uofg-pagination-skip-${y}`, className: "sr-only! focus-visible:not-sr-only!", children: "Skip Pagination" }),
-    /* @__PURE__ */ l("div", { className: `uofg-pagination-list ${E()}`, children: [
-      /* @__PURE__ */ l(
+  return /* @__PURE__ */ n("div", { className: `uofg-pagination ${F(z(), $)}`, children: [
+    /* @__PURE__ */ t("a", { href: `#uofg-pagination-skip-${b}`, className: "sr-only! focus-visible:not-sr-only!", children: "Skip Pagination" }),
+    /* @__PURE__ */ n("div", { className: `uofg-pagination-list ${E()}`, children: [
+      /* @__PURE__ */ n(
         "button",
         {
-          disabled: r <= 0,
-          className: `uofg-pagination-previous ${v()}`,
-          onClick: () => c(r - 1),
+          disabled: s <= 0,
+          className: `uofg-pagination-previous ${y()}`,
+          onClick: () => l(s - 1),
           children: [
-            /* @__PURE__ */ t(f, { icon: _ }),
+            /* @__PURE__ */ t(f, { icon: H }),
             /* @__PURE__ */ t("span", { className: "sr-only", children: "Previous Page" })
           ]
         }
       ),
-      h(0),
-      p && /* @__PURE__ */ t(f, { icon: x }),
-      j.slice(a, n).map(h),
-      g && /* @__PURE__ */ t(f, { icon: x }),
-      h(e - 1),
-      /* @__PURE__ */ l(
+      u(0),
+      c && /* @__PURE__ */ t(f, { icon: v }),
+      j.slice(i, a).map(u),
+      p && /* @__PURE__ */ t(f, { icon: v }),
+      u(e - 1),
+      /* @__PURE__ */ n(
         "button",
         {
-          disabled: r >= e - 1,
-          className: `uofg-pagination-next ${v()}`,
-          onClick: () => c(r + 1),
+          disabled: s >= e - 1,
+          className: `uofg-pagination-next ${y()}`,
+          onClick: () => l(s + 1),
           children: [
-            /* @__PURE__ */ t(f, { icon: U }),
+            /* @__PURE__ */ t(f, { icon: D }),
             /* @__PURE__ */ t("span", { className: "sr-only", children: "Next Page" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ t("span", { className: `uofg-pagination-seperator ${R()}` }),
-    /* @__PURE__ */ l("div", { className: `uofg-pagination-go-to-wrapper ${z()}`, children: [
+    /* @__PURE__ */ t("span", { className: `uofg-pagination-seperator ${A()}` }),
+    /* @__PURE__ */ n("div", { className: `uofg-pagination-go-to-wrapper ${R()}`, children: [
       /* @__PURE__ */ t(
-        G,
+        _,
         {
-          color: d,
+          color: m,
           min: 1,
           max: e,
-          value: r + 1,
-          onInput: (s) => {
-            M(isNaN(s) ? 0 : w(s - 1, 0, e - 1));
+          value: s + 1,
+          onInput: (r) => {
+            M(isNaN(r) ? 0 : N(r - 1, 0, e - 1));
           },
           className: `uofg-pagination-go-to-input ${T()}`,
           children: /* @__PURE__ */ t("span", { className: "sr-only", children: "Input Page Number" })
         }
       ),
       /* @__PURE__ */ t(
-        F,
+        V,
         {
-          id: `uofg-pagination-skip-${y}`,
-          color: d,
+          id: `uofg-pagination-skip-${b}`,
+          color: m,
           className: `uofg-pagination-go-to-button ${S()}`,
           onClick: () => {
-            c(L);
+            l(L);
           },
           children: "Go to page"
         }
@@ -217,5 +212,5 @@ function re({
   ] });
 }
 export {
-  re as Pagination
+  se as Pagination
 };

package/dist/toaster.js

@@ -1,40 +1,75 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { e as w, d as T, o as b, g as v } from "./solid-CpJcQLq3.js";
-import { FontAwesomeIcon as m } from "@fortawesome/react-fontawesome";
-import { useState as x, useCallback as d, useContext as y, useRef as C, useEffect as N } from "react";
-import { TransitionGroup as A, CSSTransition as P } from "react-transition-group";
-import { twJoin as F } from "tailwind-merge";
-import { tv as k } from "tailwind-variants";
-import { ToastContext as h } from "./toaster-context.js";
-const M = () => {
-  const e = y(h);
-  if (!e)
-    throw new Error("useToast must be used within a ToasterProvider component");
-  return e;
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { e as T, d as v, o as N, g as C } from "./solid-CpJcQLq3.js";
+import { FontAwesomeIcon as c } from "@fortawesome/react-fontawesome";
+import { n as S } from "./index.browser-E4KzWirf.js";
+import { useSyncExternalStore as A, useRef as F, useState as E, useEffect as k } from "react";
+import { TransitionGroup as P, CSSTransition as R } from "react-transition-group";
+import { twJoin as j } from "tailwind-merge";
+import { tv as q } from "tailwind-variants";
+let i = [];
+const f = /* @__PURE__ */ new Set();
+function d() {
+  f.forEach((e) => e());
+}
+function p(e) {
+  i = i.filter((t) => t.id !== e), d();
+}
+function a(e, t = "info", s = 3e3) {
+  const n = S();
+  i = [
+    ...i,
+    {
+      id: n,
+      message: e,
+      type: t,
+      timeout: s
+    }
+  ], d(), window.setTimeout(() => {
+    p(n);
+  }, s);
+}
+function I(e) {
+  return f.add(e), () => {
+    f.delete(e);
+  };
+}
+function g() {
+  return i;
+}
+function z() {
+  return A(I, g, g);
+}
+const G = {
+  add: a,
+  remove: p,
+  info: (e, t) => a(e, "info", t),
+  success: (e, t) => a(e, "success", t),
+  warning: (e, t) => a(e, "warning", t),
+  error: (e, t) => a(e, "error", t)
 };
-function S({ toast: e, onRemove: c, ...i }) {
-  const r = C(null);
-  return /* @__PURE__ */ t(P, { ...i, nodeRef: r, timeout: 300, classNames: "uofg-toast-transition", children: /* @__PURE__ */ t(E, { toast: e, onRemove: c, nodeRef: r }) });
+function J({ toast: e, onRemove: t, ...s }) {
+  const n = F(null);
+  return /* @__PURE__ */ o(R, { ...s, nodeRef: n, timeout: 300, classNames: "uofg-toast-transition", children: /* @__PURE__ */ o(M, { toast: e, onRemove: t, nodeRef: n }) });
 }
-function E({
+function M({
   toast: e,
-  onRemove: c,
-  nodeRef: i
+  onRemove: t,
+  nodeRef: s
 }) {
-  const [r, f] = x(100);
-  N(() => {
-    const s = performance.now();
-    let n;
-    const a = (l) => {
-      const u = l - s, g = Math.max(0, 100 - u / e.timeout * 100);
-      f(g), g > 0 && (n = requestAnimationFrame(a));
+  const [n, x] = E(100);
+  k(() => {
+    const h = performance.now();
+    let m;
+    const l = (w) => {
+      const b = w - h, u = Math.max(0, 100 - b / e.timeout * 100);
+      x(u), u > 0 && (m = requestAnimationFrame(l));
     };
-    return n = requestAnimationFrame(a), () => {
-      cancelAnimationFrame(n);
+    return m = requestAnimationFrame(l), () => {
+      cancelAnimationFrame(m);
     };
   }, [e.timeout]);
-  const o = k({
+  const r = q({
     slots: {
       toast: "uofg-toast relative flex max-w-[50ch] gap-2 overflow-hidden p-6 text-left text-lg",
       progress: "uofg-toast-progress absolute right-0 bottom-0 left-0 h-1 origin-left bg-current opacity-70",
@@ -58,35 +93,17 @@ function E({
       }
     }
   })({ type: e.type });
-  return /* @__PURE__ */ p("button", { onClick: () => c(e.id), ref: i, className: o.toast(), children: [
-    e.type === "info" && /* @__PURE__ */ t(m, { className: o.icon(), icon: w }),
-    e.type === "success" && /* @__PURE__ */ t(m, { className: o.icon(), icon: T }),
-    e.type === "warning" && /* @__PURE__ */ t(m, { className: o.icon(), icon: b }),
-    e.type === "error" && /* @__PURE__ */ t(m, { className: o.icon(), icon: v }),
-    /* @__PURE__ */ t("span", { className: o.message(), children: e.message }),
-    /* @__PURE__ */ t("span", { className: o.progress(), style: { width: `${r}%` }, "aria-hidden": "true" })
+  return /* @__PURE__ */ y("button", { onClick: () => t(e.id), ref: s, className: r.toast(), children: [
+    e.type === "info" && /* @__PURE__ */ o(c, { className: r.icon(), icon: T }),
+    e.type === "success" && /* @__PURE__ */ o(c, { className: r.icon(), icon: v }),
+    e.type === "warning" && /* @__PURE__ */ o(c, { className: r.icon(), icon: N }),
+    e.type === "error" && /* @__PURE__ */ o(c, { className: r.icon(), icon: C }),
+    /* @__PURE__ */ o("span", { className: r.message(), children: e.message }),
+    /* @__PURE__ */ o("span", { className: r.progress(), style: { width: `${n}%` }, "aria-hidden": "true" })
   ] });
 }
-function X({ children: e }) {
-  const [c, i] = x([]), r = d((s) => {
-    i((n) => n.filter((a) => a.id !== s));
-  }, []), f = d(
-    (s, n = "info", a = 3e3) => {
-      const l = Date.now().toString();
-      console.log("Adding toast:", l, s, n, a), i((u) => [
-        ...u,
-        {
-          id: l,
-          message: s,
-          type: n,
-          timeout: a
-        }
-      ]), setTimeout(() => {
-        r(l);
-      }, a);
-    },
-    [r]
-  ), o = F(
+function Q() {
+  const e = z(), t = j(
     "uofg-toaster",
     "fixed",
     "right-4",
@@ -98,12 +115,10 @@ function X({ children: e }) {
     "items-end",
     "gap-3"
   );
-  return /* @__PURE__ */ p(h.Provider, { value: { addToast: f }, children: [
-    e,
-    /* @__PURE__ */ t(A, { component: "div", className: o, children: c.map((s) => /* @__PURE__ */ t(S, { toast: s, onRemove: r }, s.id)) })
-  ] });
+  return /* @__PURE__ */ o(P, { component: "div", className: t, children: e.map((s) => /* @__PURE__ */ o(J, { toast: s, onRemove: G.remove }, s.id)) });
 }
 export {
-  X as ToasterProvider,
-  M as useToaster
+  Q as Toaster,
+  G as toast,
+  z as useToaster
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.10.0-rc.2",
+  "version": "1.10.0-rc.4",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {