@cerberus-design/react 0.10.4 → 0.11.0

package/build/legacy/context/prompt-modal.cjs

@@ -157,6 +157,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -165,12 +261,13 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.InformationFilled,
-  successNotification: import_icons.CheckmarkFilled,
-  warningNotification: import_icons.WarningFilled,
-  dangerNotification: import_icons.ErrorFilled,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
   invalid: import_icons.WarningFilled,
   invalidAlt: import_icons.Warning,
   redo: import_icons.Restart,
@@ -193,16 +290,16 @@ function Show(props) {
 }
 
 // src/components/Input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Input(props) {
   const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = (0, import_recipes2.input)({ size });
   const { invalid, ...fieldStates } = useFieldContext();
   const hasEndIcon = Boolean(endIcon);
   const { invalid: InvalidIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
       {
         ...nativeProps,
@@ -213,8 +310,8 @@ function Input(props) {
         className: (0, import_css2.cx)("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
@@ -222,12 +319,12 @@ function Input(props) {
 var import_recipes3 = require("@cerberus/styled-system/recipes");
 var import_css3 = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Label(props) {
   const { hidden, size, ...nativeProps } = props;
   const { required, disabled } = useFieldContext();
   const usage = hidden ? "hidden" : "visible";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "label",
     {
       ...nativeProps,
@@ -242,11 +339,11 @@ function Label(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             className: (0, import_css3.css)({
-              color: "inherit",
+              color: "page.text.100",
               fontSize: "inherit"
             }),
             children: "(required)"
@@ -261,30 +358,34 @@ function Label(props) {
 var import_react3 = require("react");
 function useModal() {
   const modalRef = (0, import_react3.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const show = (0, import_react3.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
+    setIsOpen(true);
   }, []);
   const close = (0, import_react3.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
+    setIsOpen(false);
   }, []);
   return (0, import_react3.useMemo)(() => {
     return {
       modalRef,
       show,
-      close
+      close,
+      isOpen
     };
-  }, [modalRef, show, close]);
+  }, [modalRef, show, close, isOpen]);
 }
 
 // src/components/Modal.tsx
 var import_css4 = require("@cerberus/styled-system/css");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
 var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "dialog",
     {
       ...props,
@@ -298,9 +399,9 @@ var Modal = (0, import_react4.forwardRef)(ModalEl);
 // src/components/ModalHeader.tsx
 var import_css5 = require("@cerberus/styled-system/css");
 var import_patterns2 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ...props,
@@ -308,8 +409,8 @@ function ModalHeader(props) {
         props.className,
         (0, import_patterns2.vstack)({
           alignItems: "flex-start",
-          gap: "4",
-          mb: "8"
+          gap: "md",
+          mb: "md"
         })
       )
     }
@@ -319,24 +420,24 @@ function ModalHeader(props) {
 // src/components/ModalHeading.tsx
 var import_css6 = require("@cerberus/styled-system/css");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { ...props, className: (0, import_css6.cx)(props.className, (0, import_recipes5.modal)().heading) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...props, className: (0, import_css6.cx)(props.className, (0, import_recipes5.modal)().heading) });
 }
 
 // src/components/ModalDescription.tsx
 var import_css7 = require("@cerberus/styled-system/css");
 var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...props, className: (0, import_css7.cx)(props.className, (0, import_recipes6.modal)().description) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { ...props, className: (0, import_css7.cx)(props.className, (0, import_recipes6.modal)().description) });
 }
 
 // src/components/Avatar.tsx
 var import_css8 = require("@cerberus/styled-system/css");
 var import_patterns3 = require("@cerberus/styled-system/patterns");
 var import_recipes7 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -351,7 +452,7 @@ function Avatar(props) {
   } = props;
   const { avatar: AvatarIcon } = $cerberusIcons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       ...nativeProps,
@@ -360,19 +461,19 @@ function Avatar(props) {
         (0, import_recipes7.avatar)({ gradient, size }),
         (0, import_patterns3.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -384,11 +485,11 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
@@ -424,7 +525,7 @@ var iconSizeMap = {
 };
 
 // src/context/prompt-modal.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react5.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -474,36 +575,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: (0, import_patterns4.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -511,10 +612,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: (0, import_patterns4.vstack)({
@@ -522,21 +623,32 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
-              "Type",
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "strong",
-                {
-                  className: (0, import_css9.css)({
-                    textTransform: "uppercase"
-                  }),
-                  children: content == null ? void 0 : content.key
-                }
-              ),
-              "to confirm"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              Label,
+              {
+                className: (0, import_css9.css)({
+                  gap: 1,
+                  justifyContent: "flex-start"
+                }),
+                htmlFor: "confirm",
+                size: "md",
+                children: [
+                  "Type",
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "strong",
+                    {
+                      className: (0, import_css9.css)({
+                        textTransform: "uppercase"
+                      }),
+                      children: content == null ? void 0 : content.key
+                    }
+                  ),
+                  "to confirm"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Input,
               {
                 id: "confirm",
@@ -548,7 +660,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
           className: (0, import_patterns4.hstack)({
@@ -556,7 +668,7 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -571,7 +683,7 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Button,
               {
                 className: (0, import_css9.css)({