nexaas-ui-components 1.0.19 → 1.0.21

package/dist/index.cjs

@@ -76,8 +76,8 @@ var sizes = {
     icon: "text-[16px]"
   },
   sm: {
-    text: "h-[32px]",
-    icon: "text-[14px]"
+    text: "h-[32px] text-[12px]",
+    icon: "text-[12px]"
   },
   md: {
     text: "h-[38px]",
@@ -93,16 +93,16 @@ var variants = {
     text: "bg-gradient-to-b from-[#FF4D8B] to-[#DA3063] text-white shadow-[0_2px_6px_0_rgba(218,48,99,0.25)] hover:from-[#ff4d84] hover:to-[#df4573] active:from-[#ae264f] active:to-[#ae264f] disabled:opacity-50 disabled:shadow-none active:shadow-none disabled:hover:from-[#FF4D8B] disabled:hover:to-[#DA3063]"
   },
   secondary: {
-    text: "shadow-button bg-surface border-[0.5px] border-neutral-400 text-neutral-600 hover:bg-neutral-100 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
+    text: "shadow-button bg-surface border-[0.5px] border-neutral-400 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
   },
   icon: {
-    text: "shadow-button bg-white border-[0.5px] border-neutral-300 hover:bg-[#f5f5f5] active:bg-neutral-100 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "shadow-button bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   },
   outline: {
-    text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 active:bg-rose-100  disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
+    text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
   },
   dangerOutline: {
-    text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-500 active:shadow-none"
+    text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-500 active:shadow-none"
   },
   danger: {
     text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#fe6464] hover:to-[#e24e4e] active:from-dangerous-600 active:to-dangerous-600 disabled:opacity-50 disabled:from-dangerous-500 disabled:to-dangerous-500 active:shadow-none"
@@ -114,13 +114,13 @@ var variants = {
     text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#febd5b] hover:to-[#f4a52e] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-start disabled:to-warning-end active:shadow-none"
   },
   blue: {
-    text: "shadow-button bg-blue-500 text-white text-bold"
+    text: "shadow-button bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-600 text-bold"
   },
   iconSecondary: {
     text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   },
   outlineIcon: {
-    text: "bg-white text-rose-500 hover:shadow-button active:bg-rose-500 active:text-white disabled:text-neutral-400  disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "bg-white text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   }
 };
 var paddingConfig = {
@@ -189,7 +189,7 @@ var Button = ({
         "flex-row items-center": hotkeyPosition === "left" || hotkeyPosition === "right"
       }),
       children: [
-        hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--label)" }, className: "text-p-sm font-normal -mt-[5px]", children: hotkeyLabel }),
+        hotkey && (hotkeyPosition === "top" || hotkeyPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--label)" }, className: "text-p-sm font-normal", children: hotkeyLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -222,7 +222,7 @@ var Button = ({
           "span",
           {
             style: { color: "var(--label)" },
-            className: "text-p-sm font-normal -mt-[5px]",
+            className: "text-p-sm font-normal",
             children: hotkeyLabel
           }
         )
@@ -252,19 +252,19 @@ var variants2 = {
     text: "shadow-button text-button-label bg-gradient-to-b hover:text-white from-rose-start to-rose-end active:bg-gradient-to-b active:from-rose-800 active:to-rose-800 disabled:bg-gradient-to-b disabled:from-rose-800 disabled:to-rose-800 disabled:opacity-50 hover:from-[#FD467F] hover:to-[#DF4573]"
   },
   secondary: {
-    text: "shadow-button bg-white border-[0.5px] border-paragraph text-dark-blue-600 hover:text-dark-blue-600 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:bg-white disabled:border-[0.5px] disabled:border-dark-blue-400"
+    text: "shadow-button bg-white border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:bg-white disabled:border-[0.5px] disabled:border-dark-blue-400"
   },
   link: {
-    text: "text-blue-700 hover:text-blue-800 hover:underline active:text-blue-900 active:underline disabled:text-blue-700 disabled:no-underline shadow-none font-normal"
+    text: "text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 active:underline disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
   },
   icon: {
-    text: "bg-white border-[0.5px] border-dark-blue-300 hover:bg-[#f5f5f5] active:bg-light-gray-100 hover:text-paragraph disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+    text: "bg-white border-[0.5px] border-dark-blue-300 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
   },
   iconSecondary: {
     text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
   },
   outline: {
-    text: "shadow-button bg-white border-[0.5px] border-rose-700 text-rose-700 hover:bg-[#f5f5f5] active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
+    text: "shadow-button bg-white border-[0.5px] border-rose-700 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
   },
   dark: {
     text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
@@ -285,10 +285,10 @@ var variants2 = {
     text: "shadow-button bg-blue-700 text-white text-bold"
   },
   filter: {
-    text: "shadow-button rounded-3xl border border-dark-blue-300 text-paragraph shadow-button hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-700 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-700 focus:bg-blue-100"
+    text: "shadow-button rounded-3xl border border-dark-blue-300 text-blue-500 hover:text-blue-600 hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-600 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-500 focus:bg-blue-100"
   },
   filterActive: {
-    text: "shadow-button rounded-3xl border border-blue-700 text-blue-700 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
+    text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
   }
 };
 var ButtonLink = React4.forwardRef(
@@ -350,7 +350,7 @@ var ButtonLink = React4.forwardRef(
             "span",
             {
               style: { color: "var(--label)" },
-              className: "text-p-sm font-normal -mt-[5px]",
+              className: "text-p-sm font-normal",
               children: hotkeyLabel
             }
           ),
@@ -382,7 +382,7 @@ var ButtonLink = React4.forwardRef(
             "span",
             {
               style: { color: "var(--label)" },
-              className: "text-p-sm font-normal -mt-[5px]",
+              className: "text-p-sm font-normal",
               children: hotkeyLabel
             }
           )
@@ -4311,23 +4311,326 @@ function DataTable({
     )
   ] });
 }
+var Accordion = ({ title, children, open = false }) => {
+  const [isOpen, setOpen] = React4.useState(open);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx9__default.default(
+        {
+          ["border-neutral-200"]: !isOpen,
+          ["border-rose-700"]: isOpen
+        },
+        "flex flex-col w-full px-3 py-2 shadow-input border rounded-lg"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              setOpen((state) => !state);
+            },
+            type: "button",
+            className: "flex items-center justify-between w-full ",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "i",
+                {
+                  className: clsx9__default.default(
+                    {
+                      ["transform rotate-[180deg]"]: isOpen
+                    },
+                    "duration-300 uil uil-angle-down text-[30px]"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Transition,
+          {
+            show: isOpen,
+            enter: "ease-in duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-out duration-300",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${isOpen ? "flex opacity-100" : "hidden opacity-0"} overflow-auto table-scroll`,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+function CopyPopover({ children, valueToCopy }) {
+  const [copied, setCopied] = React4.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-center gap-1",
+      onClick: async () => {
+        setCopied(true);
+        navigator.clipboard.writeText(valueToCopy);
+      },
+      onMouseLeave: () => setTimeout(() => setCopied(false), 500),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1",
+            "data-tooltip-id": "copy-id",
+            "data-tooltip-content": copied ? "Copiado" : "Copiar",
+            "data-tooltip-place": "top",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id: "copy-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-400 text-xs", children })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-tooltip-id": "icon-id",
+            "data-tooltip-content": copied ? "Copiado" : "Copiar",
+            "data-tooltip-place": "top",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id: "icon-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+var Menu = ({ triggerElement, children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { as: "div", className: "relative h-full cursor-pointer", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuButton,
+      {
+        as: "div",
+        className: "flex rounded-full text-sm h-full w-full items-center",
+        children: triggerElement
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Transition,
+      {
+        as: React4.Fragment,
+        enter: "transition ease-out duration-200",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.MenuItems,
+          {
+            className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-white cursor-default ${className}`,
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
+var Item = ({ index, isActive, onClick, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx9__default.default(
+        "h-[36px] p-2 rounded-lg items-center  cursor-pointer flex whitespace-nowrap no-underline ",
+        {
+          "bg-[#009EDB] hover:bg-[#009EDB] hover:text-[#FFFFFF] text-[#FFFFFF]": isActive
+        },
+        {
+          "hover:bg-neutral-100 text-paragraph": !isActive
+        }
+      ),
+      tabIndex: index,
+      role: "button",
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 w-full items-center whitespace-nowrap", children })
+    }
+  ) }, index);
+};
+var EditableButton = ({
+  children,
+  button,
+  onClose
+}) => {
+  const [showModal, setShowModal] = React4.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "group flex gap-[5px] items-center cursor-pointer",
+        onClick: () => setShowModal(!showModal),
+        children: button
+      }
+    ),
+    showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[294px] p-2 bg-white border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: () => setShowModal(false),
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: () => {
+              setShowModal(false);
+              if (onClose) onClose();
+            },
+            children: "Aplicar"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var EditableText = ({
+  control,
+  name = "",
+  emptyLabel,
+  children,
+  onApply,
+  value,
+  hideEditIcon,
+  truncate
+}) => {
+  const [showModal, setShowModal] = React4.useState(false);
+  const truncateText = (str, max, len) => {
+    return str.length > max ? str.substring(0, len) + "..." : str;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "group flex gap-[5px] items-baseline cursor-pointer z-[500]",
+              onClick: () => setShowModal(!showModal),
+              children: [
+                value && field.value ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: truncate ? value(truncateText(field.value, 14, 12)) : value(field.value) }) : field.value ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    className: clsx9__default.default(
+                      {
+                        ["text-label"]: !field.value,
+                        ["text-paragraph"]: field.value
+                      },
+                      "text-p-md group-hover:underline group-hover:underline-offset-[3px] cursor-pointer decoration-blue-500"
+                    ),
+                    children: "Preenchido"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    className: clsx9__default.default(
+                      {
+                        ["text-label"]: !field.value,
+                        ["text-paragraph"]: field.value
+                      },
+                      "text-p-md group-hover:underline group-hover:underline-offset-[3px] cursor-pointer decoration-blue-500"
+                    ),
+                    children: emptyLabel ? emptyLabel : "N\xE3o informado"
+                  }
+                ),
+                !hideEditIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                  "i",
+                  {
+                    style: { fontSize: "14px" },
+                    className: "uil uil-pen text-sm text-blue-500"
+                  }
+                )
+              ]
+            }
+          ),
+          showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3 ", children }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex flex-col md:flex-row md:items-center md:justify-end gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => setShowModal(false),
+                    children: "Cancelar"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "sm",
+                    onClick: () => {
+                      setShowModal(false);
+                      onApply && onApply();
+                    },
+                    children: "Salvar"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fixed top-0 bottom-0 left-0 right-0 z-40",
+                onClick: () => setShowModal(false)
+              }
+            )
+          ] })
+        ] });
+      }
+    }
+  );
+};
 
+exports.Accordion = Accordion;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
 exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
+exports.CopyPopover = CopyPopover;
 exports.DataTable = DataTable;
 exports.DataTablePagination = DataTablePagination;
 exports.DatePickerInput = DatePickerInput;
+exports.EditableButton = EditableButton;
+exports.EditableText = EditableText;
 exports.FilterCalendar = FilterCalendar;
 exports.FilterOptions = FilterOptions;
 exports.Input = Input;
 exports.InputMoney = InputMoney;
 exports.InputNumber = InputNumber;
 exports.InputPercentage = InputPercentage;
+exports.Item = Item;
 exports.Logo = Logo;
 exports.MaskedInput = MaskedInput;
+exports.Menu = Menu;
 exports.ModalDialog = ModalDialog;
 exports.PaginationSelect = PaginationSelect;
 exports.Popover = Popover3;