jcicl 1.0.5 → 1.0.9

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,154 @@
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { useState as f, 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, 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 })
+  ] })
+] }), N = ({ duration: o = 3e3, message: r, type: c = "success", onDismiss: t }) => {
+  const [s, i] = f(!0), p = () => {
+    i(!1);
+  };
+  return t == null && (t = p), u(() => {
+    i(!0);
+    const g = setTimeout(() => {
+      o > 0 && i(!1);
+    }, o);
+    return () => clearTimeout(g);
+  }, [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 {
+  N as default
+};

package/Toast/ToastHelpers.d.ts

@@ -0,0 +1,4 @@
+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;

package/Toast/ToastHelpers.js

@@ -0,0 +1,10 @@
+const n = (s, o) => {
+  o((t) => t.filter((i) => i.id !== s));
+}, a = (s, o) => {
+  const t = Date.now();
+  o((i) => [...i, { ...s, id: t }]);
+};
+export {
+  n as handleDismissToast,
+  a 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 } from './ToastHelpers';

package/Toast/index.js

@@ -0,0 +1,9 @@
+import { default as s } from "./Toast.js";
+import { Toaster as e } from "./Toaster.js";
+import { handleDismissToast as f, showToast as m } from "./ToastHelpers.js";
+export {
+  e as Toaster,
+  s as default,
+  f as handleDismissToast,
+  m as showToast
+};

package/WithLoading/WithLoading.js

@@ -1,17 +1,22 @@
-import { jsx as r, Fragment as e } from "react/jsx-runtime";
-import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as r, Fragment as m } from "react/jsx-runtime";
+import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as i } from "../.chunks/emotion-react.browser.esm.js";
-import a from "../theme.js";
-import { C as c } from "../.chunks/CircularProgress.js";
-const n = m(c)({
+import { useThemeColors as a } from "../ThemeContext.js";
+import { C as n } from "../.chunks/CircularProgress.js";
+const u = c(n, {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
   ...i`
-    color: ${a.colors.green};
+    color: ${o.themeIconBackgroundA};
   `
-}), d = ({
+})), g = ({
   loading: o,
-  children: t,
-  ...s
-}) => o ? /* @__PURE__ */ r(n, { size: 47, ...s }) : /* @__PURE__ */ r(e, { children: t });
+  children: s,
+  ...e
+}) => {
+  const t = a();
+  return o ? /* @__PURE__ */ r(u, { size: 47, ...e, customTheme: t }) : /* @__PURE__ */ r(m, { children: s });
+};
 export {
-  d as default
+  g as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.9",
   "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;
@@ -104,6 +106,15 @@ export interface TemplateThemeProps {
         backgroundColor: string;
     };
 }
+export interface ThemeOptions {
+    green: string;
+    blue: string;
+    red: string;
+    grayscale: string;
+    custom: string;
+}
+declare const theme: Theme;
+export default theme;
 export interface CustomThemeProps {
     themeColor: string;
     themeDark: string;
@@ -118,6 +129,10 @@ export interface CustomThemeProps {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;
@@ -137,15 +152,6 @@ export interface CustomThemeProps {
     darkGray1: string;
     black: string;
 }
-export interface ThemeOptions {
-    green: string;
-    blue: string;
-    red: string;
-    grayscale: string;
-    custom: string;
-}
-declare const theme: Theme;
-export default theme;
 export declare const defaultTheme: {
     themeColor: string;
     themeDark: string;
@@ -160,6 +166,10 @@ export declare const defaultTheme: {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: 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,
@@ -111,6 +113,10 @@ const o = {
   themeShadowA: e.colors.darkGreenO99,
   themeShadowB: e.boxShadows.darkGreen,
   themeShadowC: e.boxShadows.darkGreenThick,
+  themeIconBackgroundA: e.colors.green,
+  themeIconBackgroundB: e.colors.whiteGreenA,
+  themeIconColorA: e.colors.white,
+  themeIconColorB: e.colors.darkGreen,
   // These colors always stay the same, no custom theme updating
   highlightPrimary: e.colors.sunlight,
   highlightSecondary: e.colors.dandelion,
@@ -133,5 +139,5 @@ const o = {
 };
 export {
   e as default,
-  o as defaultTheme
+  r as defaultTheme
 };

package/themeUtils.d.ts

@@ -1,4 +1,5 @@
 export declare const getHueFromHex: (hex: string) => number;
+export declare const getSaturationFromHex: (hex: string) => number;
 export declare const substituteHue: (themeColor: string, hue: number) => string;
 export declare const updateTheme: (newHue?: number) => {
     themeColor: string;
@@ -14,6 +15,10 @@ export declare const updateTheme: (newHue?: number) => {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;

package/themeUtils.js

@@ -1,88 +1,100 @@
-import i, { defaultTheme as S } from "./theme.js";
-function T(o) {
-  const r = parseInt(o.substring(1, 3), 16), e = parseInt(o.substring(3, 5), 16), t = parseInt(o.substring(5, 7), 16);
-  return [r, e, t];
+import n, { defaultTheme as C } from "./theme.js";
+function a(o) {
+  const r = parseInt(o.substring(1, 3), 16), t = parseInt(o.substring(3, 5), 16), e = parseInt(o.substring(5, 7), 16);
+  return [r, t, e];
 }
-function w(o, r, e) {
-  o /= 255, r /= 255, e /= 255;
-  const t = Math.max(o, r, e), n = Math.min(o, r, e), m = (t + n) / 2;
-  if (t === n)
-    return [0, 0, m];
-  const h = t - n;
-  let u = m > 0.5 ? h / (2 - t - n) : h / (t + n), c;
-  return t === o ? c = (r - e) / h + (r < e ? 6 : 0) : t === r ? c = (e - o) / h + 2 : c = (o - r) / h + 4, c /= 6, [c, u, m];
+function d(o, r, t) {
+  o /= 255, r /= 255, t /= 255;
+  const e = Math.max(o, r, t), h = Math.min(o, r, t), c = (e + h) / 2;
+  if (e === h)
+    return [0, 0, c];
+  const i = e - h;
+  let l = c > 0.5 ? i / (2 - e - h) : i / (e + h), m;
+  return e === o ? m = (r - t) / i + (r < t ? 6 : 0) : e === r ? m = (t - o) / i + 2 : m = (o - r) / i + 4, m /= 6, [m, l, c];
 }
-function M(o, r, e) {
-  let t, n, m;
+function I(o, r, t) {
+  let e, h, c;
   if (r === 0)
-    t = n = m = e;
+    e = h = c = t;
   else {
-    const h = e < 0.5 ? e * (1 + r) : e + r - e * r, u = 2 * e - h;
-    t = a(u, h, o + 1 / 3), n = a(u, h, o), m = a(u, h, o - 1 / 3);
+    const i = t < 0.5 ? t * (1 + r) : t + r - t * r, l = 2 * t - i;
+    e = g(l, i, o + 1 / 3), h = g(l, i, o), c = g(l, i, o - 1 / 3);
   }
-  return [Math.round(t * 255), Math.round(n * 255), Math.round(m * 255)];
+  return [Math.round(e * 255), Math.round(h * 255), Math.round(c * 255)];
 }
-function a(o, r, e) {
-  return e < 0 && (e += 1), e > 1 && (e -= 1), e < 1 / 6 ? o + (r - o) * 6 * e : e < 1 / 2 ? r : e < 2 / 3 ? o + (r - o) * (2 / 3 - e) * 6 : o;
+function g(o, r, t) {
+  return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? o + (r - o) * 6 * t : t < 1 / 2 ? r : t < 2 / 3 ? o + (r - o) * (2 / 3 - t) * 6 : o;
 }
-function L(o, r, e) {
-  var t = o.toString(16).length == 1 ? "0" + o.toString(16) : o.toString(16), n = r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16), m = e.toString(16).length == 1 ? "0" + e.toString(16) : e.toString(16);
-  return "#" + t + n + m;
+function T(o, r, t) {
+  var e = o.toString(16).length == 1 ? "0" + o.toString(16) : o.toString(16), h = r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16), c = t.toString(16).length == 1 ? "0" + t.toString(16) : t.toString(16);
+  return "#" + e + h + c;
 }
-const B = (o) => {
-  const [r, e, t] = T(o), [n, m, h] = w(r, e, t);
-  return n;
+const k = (o) => {
+  const [r, t, e] = a(o), [h, c, i] = d(r, t, e);
+  return h;
+}, _ = (o) => {
+  const [r, t, e] = a(o), [h, c, i] = d(r, t, e);
+  return c;
 }, s = (o, r) => {
-  const [e, t, n] = T(o), [m, h, u] = w(e, t, n);
-  let c = h + 0.1;
-  c >= 1 && (c = 0.99);
-  let g = u;
-  g > 0.5 && (g -= 0.08), g > 0.8 && (c = 1, g += 0.03), r < 0 && (c = 0);
-  const [l, d, f] = M(r, c, g);
-  return L(l, d, f);
-}, A = (o) => {
-  const r = localStorage.getItem("theme") || "green", e = localStorage.getItem("hue") || B(i.themeOptions.green).toString();
-  if (r == "green") return S;
-  var t = parseFloat(e);
-  o != null && (t = o);
+  const [t, e, h] = a(o), [c, i, l] = d(t, e, h);
+  let m = i + 0.1;
+  m >= 1 && (m = 0.99);
+  let u = l;
+  u > 0.5 && (u -= 0.08), u > 0.8 && (m = 1, u += 0.03), r < 0 && (m = 0);
+  const [f, S, B] = I(r, m, u);
+  return T(f, S, B);
+}, F = (o) => {
+  const r = localStorage.getItem("theme") || "green", t = localStorage.getItem("hue") || k(n.themeOptions.green).toString();
+  if (r == "green") return C;
+  var e = parseFloat(t);
+  o != null && (e = o);
   const {
-    themeColor: n,
-    themeDark: m,
-    themeMediumA: h,
-    themeMediumB: u,
-    themeMediumC: c,
-    themeLight: g,
-    themeLightA: l,
-    themeLightB: d,
-    themeLightC: f,
-    themeLightD: C,
-    themeShadowA: G,
-    themeShadowB: b,
-    themeShadowC: x,
-    ...p
-  } = S;
+    themeColor: h,
+    themeDark: c,
+    themeMediumA: i,
+    themeMediumB: l,
+    themeMediumC: m,
+    themeLight: u,
+    themeLightA: f,
+    themeLightB: S,
+    themeLightC: B,
+    themeLightD: w,
+    themeShadowA: A,
+    themeShadowB: p,
+    themeShadowC: M,
+    themeIconBackgroundA: L,
+    themeIconBackgroundB: b,
+    themeIconColorA: x,
+    themeIconColorB: v,
+    ...G
+  } = C;
   return {
-    themeColor: s(i.colors.green, t),
-    themeDark: s(i.colors.darkGreen, t),
-    themeMediumA: s(i.colors.whiteGreenB, t),
+    themeColor: s(n.colors.green, e),
+    themeDark: s(n.colors.darkGreen, e),
+    themeMediumA: s(n.colors.whiteGreenB, e),
     // mint
-    themeMediumB: s(i.colors.moss, t),
-    themeMediumC: s(i.colors.sage, t),
-    themeLight: s(i.colors.whiteGreenB, t),
+    themeMediumB: s(n.colors.moss, e),
+    themeMediumC: s(n.colors.sage, e),
+    themeLight: s(n.colors.whiteGreenB, e),
     // whiteGreen
-    themeLightA: s(i.colors.moss, t),
+    themeLightA: s(n.colors.moss, e),
     // whiteGreenA
-    themeLightB: s(i.colors.whiteGreenB, t),
-    themeLightC: s(i.colors.whiteGreenC, t),
-    themeLightD: s(i.colors.whiteGreenD, t),
-    themeShadowA: s(i.colors.darkGreenO99, t) + "99",
-    themeShadowB: "0 0 8px -2px " + s(i.colors.darkGreen, t),
-    themeShadowC: "0 0 2px 1px " + s(i.colors.darkGreen, t),
-    ...p
+    themeLightB: s(n.colors.whiteGreenB, e),
+    themeLightC: s(n.colors.whiteGreenC, e),
+    themeLightD: s(n.colors.whiteGreenD, e),
+    themeShadowA: s(n.colors.darkGreenO99, e) + "99",
+    themeShadowB: "0 0 8px -2px " + s(n.colors.darkGreen, e),
+    themeShadowC: "0 0 2px 1px " + s(n.colors.darkGreen, e),
+    themeIconBackgroundA: e < 0 ? n.colors.green : s(n.colors.green, e),
+    themeIconBackgroundB: e < 0 ? n.colors.whiteGreenA : s(n.colors.whiteGreenA, e),
+    themeIconColorA: n.colors.white,
+    themeIconColorB: e < 0 ? n.colors.darkGreen : s(n.colors.darkGreen, e),
+    ...G
   };
 };
 export {
-  B as getHueFromHex,
+  k as getHueFromHex,
+  _ as getSaturationFromHex,
   s as substituteHue,
-  A as updateTheme
+  F as updateTheme
 };