nexaas-ui-components 1.0.84 → 1.0.86

package/dist/index.cjs

@@ -9,11 +9,11 @@ var zustand = require('zustand');
 var dateFns = require('date-fns');
 var react = require('@headlessui/react');
 var react$1 = require('@headlessui-float/react');
+var reactTooltip = require('react-tooltip');
 var IntlCurrencyInputRaw = require('react-intl-currency-input');
 var lodashNamespace = require('lodash');
 var InputMask = require('react-input-mask');
 var Modal = require('react-modal');
-var reactTooltip = require('react-tooltip');
 var Select = require('react-select');
 var AsyncSelect = require('react-select/async');
 var reactTable = require('@tanstack/react-table');
@@ -163,8 +163,11 @@ var variants = {
   successOutline: {
     text: "active:shadow-none text-success-500 font-bold bg-surface border-[0.5px] border-success-500 hover:bg-success-100 active:bg-success-500 active:text-white active:border-transparent disabled:opacity-50 disabled:bg-surface disabled:text-success-500"
   },
+  // Node 412:5067 — faltava o véu branco no default (ficava warning-500 chapado, enquanto
+  // danger/success já tinham o gradiente). Mesmo padrão dos dois: ::before com
+  // mix-blend-plus-lighter, zerado no hover (que troca pro gradiente opaco) e no active.
   warn: {
-    text: "shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-warning-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+    text: "relative isolate shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-warning-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
   },
   blue: {
     text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
@@ -573,7 +576,9 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
+    // Sem `focus-visible:rounded-*`: o anel de foco tem que seguir o mesmo raio do campo
+    // (`rounded-lg`) — reduzir pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-stroke" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -1302,6 +1307,26 @@ var Checkbox = ({
     }
   ) })
 ] }) });
+var Popover = ({
+  id,
+  displayArrow = true,
+  openOnClick = false
+}) => {
+  const style = {
+    noArrow: "hidden"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactTooltip.Tooltip,
+    {
+      id,
+      className: "absolute bg-neutral-700 text-p-md text-neutral-0 rounded-lg shadow-dropdown py-[6px] px-3 max-w-[430px] break-words whitespace-normal",
+      classNameArrow: !displayArrow ? style.noArrow : "",
+      openOnClick,
+      delayHide: 0,
+      delayShow: 0
+    }
+  ) });
+};
 var FilterCalendar = ({
   icon,
   label,
@@ -1596,6 +1621,9 @@ var FilterCalendar = ({
                   {
                     type: "button",
                     "aria-label": "Limpar",
+                    "data-tooltip-id": `filter-calendar-clear-${name}`,
+                    "data-tooltip-content": "Limpar",
+                    "data-tooltip-place": "top",
                     onClick: (e) => {
                       e.stopPropagation();
                       e.preventDefault();
@@ -1608,7 +1636,8 @@ var FilterCalendar = ({
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
                   }
-                )
+                ),
+                hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: `filter-calendar-clear-${name}` })
               ] }) }),
               open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
                 const onClose = () => {
@@ -2320,6 +2349,9 @@ var FilterSelect = ({
                     {
                       type: "button",
                       "aria-label": clearLabel,
+                      "data-tooltip-id": `filter-select-clear-${name}`,
+                      "data-tooltip-content": clearLabel,
+                      "data-tooltip-place": "top",
                       onClick: (e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -2335,7 +2367,8 @@ var FilterSelect = ({
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
                     }
-                  )
+                  ),
+                  hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: `filter-select-clear-${name}` })
                 ] }) }),
                 open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   react.PopoverPanel,
@@ -3195,26 +3228,6 @@ var ModalDialog = ({
     )
   ] });
 };
-var Popover4 = ({
-  id,
-  displayArrow = true,
-  openOnClick = false
-}) => {
-  const style = {
-    noArrow: "hidden"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    reactTooltip.Tooltip,
-    {
-      id,
-      className: "absolute bg-neutral-700 text-p-md text-neutral-0 rounded-lg shadow-dropdown py-[6px] px-3 max-w-[430px] break-words whitespace-normal",
-      classNameArrow: !displayArrow ? style.noArrow : "",
-      openOnClick,
-      delayHide: 0,
-      delayShow: 0
-    }
-  ) });
-};
 
 // src/components/Select/Select.styles.ts
 var customStyles = {
@@ -3281,7 +3294,9 @@ var customStyles = {
       border,
       boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
-      borderRadius: state.isFocused ? "2px" : "0.5rem",
+      // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
+      // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
+      borderRadius: "0.5rem",
       placeholder: " ",
       height: state.selectProps.smallField ? "30px" : "46px",
       backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
@@ -3702,7 +3717,9 @@ var customStyles2 = {
       border,
       boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
       outline: "none",
-      borderRadius: state.isFocused ? "2px" : "0.5rem",
+      // Raio fixo: o anel de foco é desenhado por box-shadow, que segue o borderRadius do
+      // control — trocar pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
+      borderRadius: "0.5rem",
       placeholder: " ",
       height: "46px",
       backgroundColor: state.isDisabled ? "var(--input-bg-disabled)" : "var(--surface)",
@@ -5106,7 +5123,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "copy-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: "copy-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-400 text-xs", children })
             ]
           }
@@ -5118,7 +5135,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "icon-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: "icon-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
             ]
           }
@@ -6078,7 +6095,7 @@ function InfoIcon({
       "data-tooltip-html": content,
       "data-tooltip-place": "top",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover, { id }),
         /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
       ]
     }
@@ -7600,7 +7617,7 @@ exports.MultiSelectBottom = MultiSelectBottom;
 exports.PageBox = PageBox;
 exports.PageHeader = PageHeader;
 exports.PaginationSelect = PaginationSelect;
-exports.Popover = Popover4;
+exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;