jcicl 1.0.7 → 1.0.9

package/Stepper/Stepper.js

@@ -7,7 +7,7 @@ import { k as A, c as P } from "../.chunks/emotion-react.browser.esm.js";
 import { Button as q } from "../Button/Button.js";
 import { SlideOut as J, SlideIn as Q, SlideInReverse as z, SlideOutReverse as W } from "../animation/Slide/Slide.js";
 import { useThemeColors as Z } from "../ThemeContext.js";
-import { g as V, a as _, s as g, c as f, u as F, b as O, P as o, d as K, l as rr, j as er, k as tr } from "../.chunks/DefaultPropsProvider.js";
+import { g as V, a as _, s as g, c as f, u as F, b as O, P as o, d as K, l as rr, k as er, m as tr } from "../.chunks/DefaultPropsProvider.js";
 import { m as w } from "../.chunks/memoTheme.js";
 import { P as or } from "../.chunks/Paper.js";
 import { u as ar } from "../.chunks/index.js";

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.7",
+  "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;

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
 };