nexaas-ui-components 1.0.19 → 1.0.20

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]",
@@ -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;