@uoguelph/react-components 1.3.0 → 1.3.1

package/dist/components/number-input/number-input.d.ts

@@ -14,7 +14,7 @@ export type NumberInputProps = PropsWithChildren<{
     max?: number;
     /** Callback to call when the input changes */
     onInput?: (value: number, e?: FormEvent<HTMLInputElement>) => void;
-    /** The color of the inputs control buttons */
+    /** The colour of the input's control buttons */
     color?: 'red' | 'yellow' | 'blue' | 'green';
 } & Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onInput'>>;
 export declare function NumberInput({ initialValue, color, placeholder, onInput, children, className, min, max, value, ...rest }: NumberInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.d.ts

@@ -9,11 +9,17 @@ export type PaginationProps = {
     defaultPage?: number;
     /** A callback for when the user has selected an item. */
     onChange: (page: number) => void;
-    /** The color of the pagination controls */
-    color: 'red' | 'yellow' | 'blue' | 'green';
+    /**
+     * The colour of the pagination controls
+     *
+     * @default 'yellow'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green';
     /** Whether to hide the manual page selector */
     hideInput?: boolean;
     /** Whether to hide the list of pages */
     hideList?: boolean;
+    /** Additional classes to apply to the component */
+    className?: string;
 };
-export declare function Pagination({ page, count, visible, defaultPage, onChange, color, hideInput, hideList, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ page, count, visible, defaultPage, onChange, color, hideInput, hideList, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/pagination.js

@@ -1,12 +1,13 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { j as x } from "./solid-D19hAF5t.js";
 import { FontAwesomeIcon as u } from "@fortawesome/react-fontawesome";
-import { useState as y, useEffect as T } from "react";
-import { tv as q } from "tailwind-variants";
+import { useState as y, useEffect as q } from "react";
+import { twMerge as B } from "tailwind-merge";
+import { tv as F } from "tailwind-variants";
 import { c as N } from "./math-utils-CnAd98v6.js";
-import { Button as B } from "./button.js";
-import { NumberInput as F } from "./number-input.js";
-var G = {
+import { Button as G } from "./button.js";
+import { NumberInput as S } from "./number-input.js";
+var V = {
   prefix: "fad",
   iconName: "chevrons-right",
   icon: [
@@ -16,7 +17,7 @@ var G = {
     "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"]
   ]
-}, S = {
+}, _ = {
   prefix: "fad",
   iconName: "chevrons-left",
   icon: [
@@ -27,7 +28,7 @@ var G = {
     ["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"]
   ]
 };
-function U({
+function Z({
   page: d,
   count: o,
   visible: w,
@@ -35,28 +36,29 @@ function U({
   onChange: c,
   color: p = "yellow",
   hideInput: $ = !1,
-  hideList: k = !1
+  hideList: k = !1,
+  className: L
 }) {
-  const [t, L] = y(h ?? 0), [P, j] = y(h ?? 0), C = [...Array(o).keys()], r = Math.max(Math.ceil(w), 3);
-  T(() => {
+  const [t, M] = y(h ?? 0), [P, j] = y(h ?? 0), C = [...Array(o).keys()], s = Math.max(Math.ceil(w), 3);
+  q(() => {
     l(d ?? 0);
   }, [d]);
-  const l = (s) => {
-    const v = N(s, 0, o - 1);
-    c == null || c(v), L(v);
-  }, f = (s) => /* @__PURE__ */ e("li", { className: "uog:contents", children: /* @__PURE__ */ e(
+  const l = (r) => {
+    const v = N(r, 0, o - 1);
+    c == null || c(v), M(v);
+  }, m = (r) => /* @__PURE__ */ e("li", { className: "uog:contents", children: /* @__PURE__ */ e(
     "button",
     {
-      className: `uofg-pagination-item ${E({ active: t === s })}`,
+      className: `uofg-pagination-item ${W({ active: t === r })}`,
       onClick: () => {
-        l(s);
+        l(r);
       },
-      children: s + 1
+      children: r + 1
     }
-  ) }, s);
-  let i, a, n, g;
-  o <= r || o < 5 ? (i = 1, a = o - 1, n = !1, g = !1) : t < r - 1 ? (i = 1, a = r, g = !0, n = !1) : t > o - r ? (i = o - r, a = o - 1, n = !0, g = !1) : (i = t - Math.floor(r / 2), a = i + r, n = i > 1, g = a < o);
-  const { base: I, list: M, seperator: z, control: b, item: E, inputWrapper: W, goTo: A, input: R } = q({
+  ) }, r);
+  let i, a, g, n;
+  o <= s || o < 5 ? (i = 1, a = o - 1, g = !1, n = !1) : t < s - 1 ? (i = 1, a = s, n = !0, g = !1) : t > o - s ? (i = o - s, a = o - 1, g = !0, n = !1) : (i = t - Math.floor(s / 2), a = i + s, g = i > 1, n = a < o);
+  const { base: I, list: z, seperator: E, control: b, item: W, inputWrapper: A, goTo: R, input: T } = F({
     slots: {
       base: "uog:flex uog:w-full uog:flex-col uog:md:flex-row uog:gap-4 uog:items-center uog:justify-center",
       list: "uog:flex uog:gap-4 uog:items-center uog:justify-center",
@@ -133,52 +135,52 @@ function U({
     hideList: k ?? !1,
     hideInput: $ ?? !1
   });
-  return /* @__PURE__ */ m("div", { className: `uofg-pagination ${I()}`, children: [
-    /* @__PURE__ */ m("ul", { className: `uofg-pagination-list ${M()}`, children: [
+  return /* @__PURE__ */ f("div", { className: `uofg-pagination ${B(I(), L)}`, children: [
+    /* @__PURE__ */ f("ul", { className: `uofg-pagination-list ${z()}`, children: [
       /* @__PURE__ */ e("li", { className: "uog:contents", children: /* @__PURE__ */ e(
         "button",
         {
           disabled: t <= 0,
           className: `uofg-pagination-previous ${b()}`,
           onClick: () => l(t - 1),
-          children: /* @__PURE__ */ e(u, { icon: S })
+          children: /* @__PURE__ */ e(u, { icon: _ })
         }
       ) }),
-      /* @__PURE__ */ e("li", { className: "uog:contents", children: f(0) }),
-      n && /* @__PURE__ */ e(u, { icon: x }),
-      C.slice(i, a).map(f),
+      /* @__PURE__ */ e("li", { className: "uog:contents", children: m(0) }),
       g && /* @__PURE__ */ e(u, { icon: x }),
-      /* @__PURE__ */ e("li", { className: "uog:contents", children: f(o - 1) }),
+      C.slice(i, a).map(m),
+      n && /* @__PURE__ */ e(u, { icon: x }),
+      /* @__PURE__ */ e("li", { className: "uog:contents", children: m(o - 1) }),
       /* @__PURE__ */ e("li", { className: "uog:contents", children: /* @__PURE__ */ e(
         "button",
         {
           disabled: t >= o - 1,
           className: `uofg-pagination-next ${b()}`,
           onClick: () => l(t + 1),
-          children: /* @__PURE__ */ e(u, { icon: G })
+          children: /* @__PURE__ */ e(u, { icon: V })
         }
       ) })
     ] }),
-    /* @__PURE__ */ e("span", { className: `uofg-pagination-seperator ${z()}` }),
-    /* @__PURE__ */ m("div", { className: `uofg-pagination-go-to-wrapper ${W()}`, children: [
+    /* @__PURE__ */ e("span", { className: `uofg-pagination-seperator ${E()}` }),
+    /* @__PURE__ */ f("div", { className: `uofg-pagination-go-to-wrapper ${A()}`, children: [
       /* @__PURE__ */ e(
-        F,
+        S,
         {
           color: p,
           min: 1,
           max: o,
           value: t + 1,
-          onInput: (s) => {
-            j(isNaN(s) ? 0 : N(s - 1, 0, o - 1));
+          onInput: (r) => {
+            j(isNaN(r) ? 0 : N(r - 1, 0, o - 1));
           },
-          className: `uofg-pagination-go-to-input ${R()}`
+          className: `uofg-pagination-go-to-input ${T()}`
         }
       ),
       /* @__PURE__ */ e(
-        B,
+        G,
         {
           color: p,
-          className: `uofg-pagination-go-to-button ${A()}`,
+          className: `uofg-pagination-go-to-button ${R()}`,
           onClick: () => {
             l(P);
           },
@@ -189,5 +191,5 @@ function U({
   ] });
 }
 export {
-  U as Pagination
+  Z as Pagination
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {
@@ -84,5 +84,5 @@
   "bugs": {
     "url": "https://github.com/ccswbs/uofg-components/issues"
   },
-  "gitHead": "fc431534654abcd25a1ac609b9734772f69f48c4"
+  "gitHead": "2a9a13f4af35d833daf38dfd27b1346df69f2a57"
 }