jcicl 1.0.7 → 1.0.11

package/Toast/Toast.d.ts

@@ -0,0 +1,8 @@
+export type ToastProps = {
+    type?: 'success' | 'warning' | 'error';
+    duration?: number;
+    onDismiss?: () => void;
+    message?: string;
+};
+declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/Toast/Toast.js

@@ -0,0 +1,155 @@
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { useState as g, useEffect as u } from "react";
+import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as a } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import { c as m } from "../.chunks/createLucideIcon.js";
+import { C as w } from "../.chunks/check.js";
+import { X as y } from "../.chunks/x.js";
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const x = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m4.9 4.9 14.2 14.2", key: "1m5liu" }]
+], k = m("ban", x);
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const b = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+], $ = m("triangle-alert", b), T = l("div")(
+  ({ backgroundColor: o, open: r }) => ({
+    ...a`
+      background-color: ${o};
+      display: ${r ? "flex" : "none"} !important;
+      max-width: 400px;
+      font-family: ${e.fonts.roboto};
+      position: relative;
+      box-shadow: 3px 4px 4px 0 ${e.colors.gray3}80;
+      transition: opacity 0.3s ease;
+      align-content: center;
+
+      .close-button {
+        color: ${e.colors.charcoal};
+      }
+
+      .close-button:hover {
+        color: ${e.colors.gray3};
+        transition: stroke-width 0.3s ease;
+        stroke-width: 3;
+      }
+    `
+  })
+), v = l("div")(({ backgroundColor: o }) => ({
+  ...a`
+    display: flex;
+    background-color: ${o};
+    padding: 11px;
+  `
+})), C = l("p")(() => ({
+  ...a`
+    color: ${e.colors.charcoal};
+    font-size: 11pt;
+    padding: 12px 15px;
+    margin: 0;
+    line-height: 1.5;
+    min-width: 70px;
+    width: 100%;
+  `
+})), S = l("div")(({ duration: o, color: r }) => ({
+  ...a`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: ${r};
+    animation: progress-animation ${o - 300}ms linear forwards;
+
+    @keyframes progress-animation {
+      0% {
+        width: 0;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+  `
+})), d = ({
+  icon: o,
+  message: r,
+  backgroundColor: c = e.colors.whiteGreenA,
+  color: t = e.colors.green,
+  onDismiss: s,
+  duration: i = 3e3,
+  open: p
+}) => /* @__PURE__ */ h(T, { backgroundColor: c, color: t, open: p, children: [
+  /* @__PURE__ */ n(v, { backgroundColor: t, children: /* @__PURE__ */ n(o, { size: 25, strokeWidth: 2, style: { color: e.colors.white, alignSelf: "center" } }) }),
+  /* @__PURE__ */ h("div", { style: { display: "flex", position: "relative", alignItems: "center", width: "100%" }, children: [
+    /* @__PURE__ */ n(C, { children: r }),
+    /* @__PURE__ */ n(y, { size: 20, className: "close-button", onClick: s, style: { margin: "8px", minWidth: "20px" } }),
+    i > 0 && /* @__PURE__ */ n(S, { duration: i, color: t })
+  ] })
+] }), B = ({ duration: o = 3e3, message: r, type: c = "success", onDismiss: t }) => {
+  const [s, i] = g(!0), p = () => {
+    i(!1);
+  };
+  return t == null && (t = p), u(() => {
+    i(!0);
+    const f = setTimeout(() => {
+      o > 0 && i(!1);
+    }, o);
+    return () => clearTimeout(f);
+  }, [o, c]), c == "error" ? /* @__PURE__ */ n(
+    d,
+    {
+      icon: k,
+      message: r,
+      backgroundColor: e.colors.lighterRed,
+      color: e.colors.burgundy,
+      onDismiss: t,
+      duration: o,
+      open: s
+    }
+  ) : c == "warning" ? /* @__PURE__ */ n(
+    d,
+    {
+      icon: $,
+      message: r,
+      backgroundColor: e.colors.yellowLight,
+      color: e.colors.yellow,
+      onDismiss: t,
+      duration: o,
+      open: s
+    }
+  ) : /* @__PURE__ */ n(
+    d,
+    {
+      icon: w,
+      message: r,
+      backgroundColor: e.colors.whiteGreenA,
+      color: e.colors.green,
+      onDismiss: t,
+      duration: o,
+      open: s
+    }
+  );
+};
+export {
+  B as default
+};

package/Toast/ToastHelpers.d.ts

@@ -0,0 +1,6 @@
+import { ToastItem } from '../../../../../../../../../src/components/composite/Toast/Toaster';
+import { ToastProps } from '../../../../../../../../../src/components/composite/Toast/Toast';
+export declare const handleDismissToast: (id: number, setToasts: React.Dispatch<React.SetStateAction<ToastItem[]>>) => void;
+export declare const showToast: (toast: ToastProps, setToasts: React.Dispatch<React.SetStateAction<ToastItem[]>>) => void;
+export declare const saveToastForRedirect: (toast: ToastProps) => void;
+export declare const showSavedToast: (setToasts: React.Dispatch<React.SetStateAction<ToastItem[]>>) => void;

package/Toast/ToastHelpers.js

@@ -0,0 +1,25 @@
+const a = (t, s) => {
+  s((e) => e.filter((o) => o.id !== t));
+}, n = (t, s) => {
+  const e = Date.now();
+  s((o) => [...o, { ...t, id: e }]);
+}, r = (t) => {
+  const s = {
+    type: t.type ?? "warning",
+    message: t.message ?? "Action complete",
+    duration: String(t.duration ?? 3e3)
+  };
+  sessionStorage.setItem("savedToast", JSON.stringify(s));
+}, i = (t) => {
+  const s = JSON.parse(sessionStorage.getItem("savedToast") || "{}");
+  if (s.type !== "success" && s.type !== "warning" && s.type !== "error")
+    return;
+  const e = Date.now();
+  t((o) => [...o, { ...s, id: e }]), sessionStorage.removeItem("savedToast");
+};
+export {
+  a as handleDismissToast,
+  r as saveToastForRedirect,
+  i as showSavedToast,
+  n as showToast
+};

package/Toast/Toaster.d.ts

@@ -0,0 +1,9 @@
+import { ToastProps } from './Toast';
+export type ToastItem = ToastProps & {
+    id: number;
+};
+export type ToasterProps = {
+    toastQueue: ToastItem[];
+    onDismiss?: (id: number) => void;
+};
+export declare const Toaster: React.FC<ToasterProps>;

package/Toast/Toaster.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "./Toast.js";
+const x = ({ toastQueue: s = [], onDismiss: t }) => {
+  const r = (o) => {
+    t && t(o);
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 20,
+        right: 20,
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        zIndex: 9999
+      },
+      children: s.map(({ id: o, ...e }) => /* @__PURE__ */ i(m, { ...e, onDismiss: () => r(o) }, o))
+    }
+  );
+};
+export {
+  x as Toaster
+};

package/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default, type ToastProps } from './Toast';
+export { Toaster, type ToastItem } from './Toaster';
+export { handleDismissToast, showToast, saveToastForRedirect, showSavedToast } from './ToastHelpers';

package/Toast/index.js

@@ -0,0 +1,11 @@
+import { default as e } from "./Toast.js";
+import { Toaster as a } from "./Toaster.js";
+import { handleDismissToast as T, saveToastForRedirect as d, showSavedToast as f, showToast as m } from "./ToastHelpers.js";
+export {
+  a as Toaster,
+  e as default,
+  T as handleDismissToast,
+  d as saveToastForRedirect,
+  f as showSavedToast,
+  m as showToast
+};

package/Tooltip/Tooltip.js

@@ -1,14 +1,12 @@
 import { jsxs as Pe, jsx as C } from "react/jsx-runtime";
 import * as s from "react";
 import { a as Qe, g as Ze, s as Y, c as Me, e as Ee, u as eo, b as I, P as o, d as oo } from "../.chunks/DefaultPropsProvider.js";
-import { u as to } from "../.chunks/index.js";
-import { a as ro } from "../.chunks/useTheme.js";
+import { u as to, a as j } from "../.chunks/index.js";
+import { a as ro, b as po, g as no, G as Re, e as so } from "../.chunks/Portal.js";
 import { m as G } from "../.chunks/memoTheme.js";
 import { P as $e } from "../.chunks/Popper.js";
-import { b as j, c as Re, a as po, T as no } from "../.chunks/TransitionGroupContext.js";
-import { u as so } from "../.chunks/useControlled.js";
-import { u as ao, g as io, G as Ce, e as lo } from "../.chunks/Portal.js";
-import { a as A } from "../.chunks/resolveComponentProps.js";
+import { b as A, c as Ce, a as ao, T as io } from "../.chunks/TransitionGroupContext.js";
+import { u as lo } from "../.chunks/useControlled.js";
 import { i as xe } from "../.chunks/isFocusVisible.js";
 function co(r) {
   return Ze("MuiTooltip", r);
@@ -278,7 +276,7 @@ const uo = (r) => {
   }
 })));
 let S = !1;
-const Oe = new no();
+const Oe = new io();
 let R = {
   x: 0,
   y: 0
@@ -320,12 +318,12 @@ const Ne = /* @__PURE__ */ s.forwardRef(function(e, n) {
     slotProps: b = {},
     slots: O = {},
     title: f,
-    TransitionComponent: Fe = Ce,
+    TransitionComponent: Fe = Re,
     TransitionProps: Ue,
     ...pe
   } = c, m = /* @__PURE__ */ s.isValidElement(h) ? h : /* @__PURE__ */ C("span", {
     children: h
-  }), ne = ro(), We = to(), [a, se] = s.useState(), [F, Be] = s.useState(null), M = s.useRef(!1), U = je || k, ae = j(), W = j(), E = j(), ie = j(), [Ve, le] = so({
+  }), ne = ro(), We = to(), [a, se] = s.useState(), [F, Be] = s.useState(null), M = s.useRef(!1), U = je || k, ae = A(), W = A(), E = A(), ie = A(), [Ve, le] = lo({
     controlled: oe,
     default: !1,
     name: "Tooltip",
@@ -341,13 +339,13 @@ const Ne = /* @__PURE__ */ s.forwardRef(function(e, n) {
 `));
     }, [f, a, t]);
   }
-  const B = ao(De), y = s.useRef(), $ = Re(() => {
+  const B = po(De), y = s.useRef(), $ = Ce(() => {
     y.current !== void 0 && (document.body.style.WebkitUserSelect = y.current, y.current = void 0), ie.clear();
   });
   s.useEffect(() => $, [$]);
   const ce = (t) => {
     Oe.clear(), S = !0, le(!0), ee && !d && ee(t);
-  }, N = Re(
+  }, N = Ce(
     /**
      * @param {React.SyntheticEvent | Event} event
      */
@@ -393,7 +391,7 @@ const Ne = /* @__PURE__ */ s.forwardRef(function(e, n) {
       document.removeEventListener("keydown", t);
     };
   }, [N, d]);
-  const He = po(io(m), se, n);
+  const He = ao(no(m), se, n);
   !f && f !== 0 && (d = !1);
   const z = s.useRef(), Ye = (t) => {
     const l = m.props;
@@ -443,17 +441,17 @@ const Ne = /* @__PURE__ */ s.forwardRef(function(e, n) {
     placement: te,
     PopperComponentProp: re,
     touch: M.current
-  }, H = uo(P), he = O.popper ?? x.Popper ?? fo, ge = O.transition ?? x.Transition ?? Fe ?? Ce, be = O.tooltip ?? x.Tooltip ?? ho, Te = O.arrow ?? x.Arrow ?? go, qe = A(he, {
+  }, H = uo(P), he = O.popper ?? x.Popper ?? fo, ge = O.transition ?? x.Transition ?? Fe ?? Re, be = O.tooltip ?? x.Tooltip ?? ho, Te = O.arrow ?? x.Arrow ?? go, qe = j(he, {
     ...u,
     ...b.popper ?? g.popper,
     className: I(H.popper, u == null ? void 0 : u.className, (ye = b.popper ?? g.popper) == null ? void 0 : ye.className)
-  }, P), Ke = A(ge, {
+  }, P), Ke = j(ge, {
     ...Ue,
     ...b.transition ?? g.transition
-  }, P), Xe = A(be, {
+  }, P), Xe = j(be, {
     ...b.tooltip ?? g.tooltip,
     className: I(H.tooltip, (we = b.tooltip ?? g.tooltip) == null ? void 0 : we.className)
-  }, P), Je = A(Te, {
+  }, P), Je = j(Te, {
     ...b.arrow ?? g.arrow,
     className: I(H.arrow, (ve = b.arrow ?? g.arrow) == null ? void 0 : ve.className)
   }, P);
@@ -508,7 +506,7 @@ process.env.NODE_ENV !== "production" && (Ne.propTypes = {
   /**
    * Tooltip reference element.
    */
-  children: lo.isRequired,
+  children: so.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -686,7 +684,7 @@ process.env.NODE_ENV !== "production" && (Ne.propTypes = {
    */
   TransitionProps: o.object
 });
-const Eo = ({
+const Oo = ({
   title: r,
   children: e,
   arrow: n = !0,
@@ -697,6 +695,6 @@ const Eo = ({
   return /* @__PURE__ */ C(Ne, { ...h, children: e });
 };
 export {
-  Eo as Tooltip,
-  Eo as default
+  Oo as Tooltip,
+  Oo as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.11",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -55,6 +55,8 @@ export interface ThemeColors {
     whiteGreenC: string;
     whiteGreenD: string;
     whiteBlue: string;
+    yellow: string;
+    yellowLight: string;
 }
 export interface ThemeBoxShadows extends Partial<ThemeColors> {
     black63?: string;

package/theme.js

@@ -60,7 +60,9 @@ const e = {
     whiteGreenB: "#f0f8f0",
     whiteGreenC: "#e8f5e8",
     whiteGreenD: "#f8fff8",
-    whiteBlue: "#f8f9fa"
+    whiteBlue: "#f8f9fa",
+    yellow: "#e3b50e",
+    yellowLight: "#f4edcd"
   },
   constants: {
     appHeaderHeight: 58,
@@ -83,21 +85,21 @@ const e = {
 };
 e.boxShadows = {
   ...Object.fromEntries(
-    Object.keys(e.colors).map((r) => [
-      r,
-      `0 0 8px -2px ${e.colors[r]}`
+    Object.keys(e.colors).map((o) => [
+      o,
+      `0 0 8px -2px ${e.colors[o]}`
     ])
   ),
   ...Object.fromEntries(
-    Object.keys(e.colors).map((r) => [
-      `${r}Thick`,
-      `0 0 2px 1px ${e.colors[r]}`
+    Object.keys(e.colors).map((o) => [
+      `${o}Thick`,
+      `0 0 2px 1px ${e.colors[o]}`
     ])
   ),
   black63: "0px 0px 2px 1px rgba(0, 0, 0, 0.63)",
   gray63: "0px 0px 2px 1px rgba(100, 100, 100, 0.63)"
 };
-const o = {
+const r = {
   themeColor: e.colors.green,
   themeDark: e.colors.darkGreen,
   themeMediumA: e.colors.mint,
@@ -137,5 +139,5 @@ const o = {
 };
 export {
   e as default,
-  o as defaultTheme
+  r as defaultTheme
 };

package/utils.d.ts

@@ -7,3 +7,4 @@ export declare const formatAddress: (address: {
     zip?: string | null;
 }) => string;
 export declare const formatTimestamp: (timestamp: string) => string;
+export declare const formatPhoneNumber: (number: string | undefined) => [string, string | undefined];

package/utils.js

@@ -1,14 +1,14 @@
-const d = (t, e = "mmddyyyy") => e === "mmddyyyy" ? new Date(t).toLocaleDateString("en-US", {
+const h = (e, t = "mmddyyyy") => t === "mmddyyyy" ? new Date(e).toLocaleDateString("en-US", {
   month: "numeric",
   day: "numeric",
   year: "numeric"
-}) : t, y = (t) => {
-  const { line1: e, line2: o, city: n, state: a, zip: s } = t;
-  let r = e;
-  return o && (r += `, ${o}`), n && (r += `, ${n}`), a && (r += `, ${a}`), s && (r += ` ${s}`), r;
-}, m = (t) => {
-  if (t > 3 && t < 21) return "th";
-  switch (t % 10) {
+}) : e, g = (e) => {
+  const { line1: t, line2: o, city: i, state: n, zip: c } = e;
+  let r = t;
+  return o && (r += `, ${o}`), i && (r += `, ${i}`), n && (r += `, ${n}`), c && (r += ` ${c}`), r;
+}, $ = (e) => {
+  if (e > 3 && e < 21) return "th";
+  switch (e % 10) {
     case 1:
       return "st";
     case 2:
@@ -18,16 +18,35 @@ const d = (t, e = "mmddyyyy") => e === "mmddyyyy" ? new Date(t).toLocaleDateStri
     default:
       return "th";
   }
-}, f = (t) => {
+}, p = (e) => {
   try {
-    const e = new Date(t), o = e.toLocaleDateString("en-US", { month: "short" }) + ".", n = e.getDate(), a = m(n), s = e.getFullYear(), r = e.getHours(), c = e.getMinutes().toString().padStart(2, "0"), i = r % 12 || 12, u = r >= 12 ? "pm" : "am";
-    return `${o} ${n}${a}, ${s}, ${i}:${c}${u}`;
+    const t = /* @__PURE__ */ new Date(e.replace(" ", "T") + "Z"), i = new Intl.DateTimeFormat("en-US", {
+      timeZone: "America/Chicago",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: !0
+    }).formatToParts(t), n = (l) => {
+      var a;
+      return ((a = i.find((y) => y.type === l)) == null ? void 0 : a.value) ?? "";
+    }, c = n("month") + ".", r = Number(n("day")), s = n("year"), m = n("hour"), u = n("minute"), d = n("dayPeriod").toLowerCase(), f = $(r);
+    return `${c} ${r}${f}, ${s}, ${m}:${u}${d}`;
   } catch {
-    return t;
+    return e;
   }
+}, D = (e) => {
+  if (e == null) return ["", void 0];
+  let t = e.replace(/\D/g, "") || "";
+  t.at(0) == "1" && (t = t.slice(1));
+  const o = t.slice(0, 3), i = t.slice(3, 6), n = t.slice(6, 10), c = t.slice(10);
+  let r = t;
+  return t.length >= 4 && (r = `(${o}) ${t.slice(3)}`), t.length >= 7 && (r = `(${o}) ${i}-${t.slice(6)}`), t.length > 10 && (r = `(${o}) ${i}-${n} ext. ${c}`), [r, t];
 };
 export {
-  y as formatAddress,
-  d as formatDate,
-  f as formatTimestamp
+  g as formatAddress,
+  h as formatDate,
+  D as formatPhoneNumber,
+  p as formatTimestamp
 };

package/.chunks/resolveComponentProps.js

@@ -1,80 +0,0 @@
-import { b as l } from "./DefaultPropsProvider.js";
-function O(s) {
-  return typeof s == "string";
-}
-function A(s, c, e) {
-  return s === void 0 || O(s) ? c : {
-    ...c,
-    ownerState: {
-      ...c.ownerState,
-      ...e
-    }
-  };
-}
-function k(s, c = []) {
-  if (s === void 0)
-    return {};
-  const e = {};
-  return Object.keys(s).filter((n) => n.match(/^on[A-Z]/) && typeof s[n] == "function" && !c.includes(n)).forEach((n) => {
-    e[n] = s[n];
-  }), e;
-}
-function a(s) {
-  if (s === void 0)
-    return {};
-  const c = {};
-  return Object.keys(s).filter((e) => !(e.match(/^on[A-Z]/) && typeof s[e] == "function")).forEach((e) => {
-    c[e] = s[e];
-  }), c;
-}
-function R(s) {
-  const {
-    getSlotProps: c,
-    additionalProps: e,
-    externalSlotProps: n,
-    externalForwardedProps: t,
-    className: i
-  } = s;
-  if (!c) {
-    const g = l(e == null ? void 0 : e.className, i, t == null ? void 0 : t.className, n == null ? void 0 : n.className), h = {
-      ...e == null ? void 0 : e.style,
-      ...t == null ? void 0 : t.style,
-      ...n == null ? void 0 : n.style
-    }, m = {
-      ...e,
-      ...t,
-      ...n
-    };
-    return g.length > 0 && (m.className = g), Object.keys(h).length > 0 && (m.style = h), {
-      props: m,
-      internalRef: void 0
-    };
-  }
-  const v = k({
-    ...t,
-    ...n
-  }), E = a(n), H = a(t), f = c(v), y = l(f == null ? void 0 : f.className, e == null ? void 0 : e.className, i, t == null ? void 0 : t.className, n == null ? void 0 : n.className), N = {
-    ...f == null ? void 0 : f.style,
-    ...e == null ? void 0 : e.style,
-    ...t == null ? void 0 : t.style,
-    ...n == null ? void 0 : n.style
-  }, u = {
-    ...f,
-    ...e,
-    ...H,
-    ...E
-  };
-  return y.length > 0 && (u.className = y), Object.keys(N).length > 0 && (u.style = N), {
-    props: u,
-    internalRef: f.ref
-  };
-}
-function W(s, c, e) {
-  return typeof s == "function" ? s(c, e) : s;
-}
-export {
-  A as a,
-  k as e,
-  R as m,
-  W as r
-};

package/.chunks/useTheme.js

@@ -1,23 +0,0 @@
-import * as n from "react";
-import { h as s, T as o, i as u } from "./DefaultPropsProvider.js";
-import { T as r } from "./emotion-styled.browser.esm.js";
-function m(e) {
-  return Object.keys(e).length === 0;
-}
-function a(e = null) {
-  const t = n.useContext(r);
-  return !t || m(t) ? e : t;
-}
-const c = s();
-function h(e = c) {
-  return a(e);
-}
-function f() {
-  const e = h(u);
-  return process.env.NODE_ENV !== "production" && n.useDebugValue(e), e[o] || e;
-}
-export {
-  f as a,
-  h as b,
-  a as u
-};