nexaas-ui-components 1.0.84 → 1.0.86

package/dist/index.js

@@ -6,13 +6,13 @@ import { DateInput3, DateRangePicker3, DatePicker3 } from '@blueprintjs/datetime
 import { Controller } from 'react-hook-form';
 import { create } from 'zustand';
 import { parse, format, set, sub, startOfWeek, endOfWeek, startOfMonth, endOfMonth, subYears } from 'date-fns';
-import { Switch, Popover, PopoverButton, PopoverPanel, Listbox, ListboxOptions, Combobox, Transition, Menu as Menu$1, MenuButton, MenuItems, MenuItem, TabGroup, TabList, Tab, TabPanels, TabPanel, ListboxOption, Dialog } from '@headlessui/react';
+import { Switch, Popover as Popover$1, PopoverButton, PopoverPanel, Listbox, ListboxOptions, Combobox, Transition, Menu as Menu$1, MenuButton, MenuItems, MenuItem, TabGroup, TabList, Tab, TabPanels, TabPanel, ListboxOption, Dialog } from '@headlessui/react';
 import { Float } from '@headlessui-float/react';
+import { Tooltip } from 'react-tooltip';
 import IntlCurrencyInputRaw from 'react-intl-currency-input';
 import * as lodashNamespace from 'lodash';
 import InputMask from 'react-input-mask';
 import Modal from 'react-modal';
-import { Tooltip } from 'react-tooltip';
 import Select, { components } from 'react-select';
 import AsyncSelect from 'react-select/async';
 import { useReactTable, getExpandedRowModel, getFacetedUniqueValues, getFacetedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -131,8 +131,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"
@@ -541,7 +544,9 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__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]",
@@ -1270,6 +1275,26 @@ var Checkbox = ({
     }
   ) })
 ] }) });
+var Popover = ({
+  id,
+  displayArrow = true,
+  openOnClick = false
+}) => {
+  const style = {
+    noArrow: "hidden"
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    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,
@@ -1526,7 +1551,7 @@ var FilterCalendar = ({
         };
         const chipLabel = calendarLabel ? calendarLabel : ((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.length) > 0 ? (_c = field == null ? void 0 : field.value) == null ? void 0 : _c.map((item) => item !== null ? format(item, "dd/MM/yyyy") : "").join(" - ") : label;
         return /* @__PURE__ */ jsx(
-          Popover,
+          Popover$1,
           {
             className: clsx9(
               { ["w-full"]: isMobileSize },
@@ -1564,6 +1589,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();
@@ -1576,7 +1604,8 @@ var FilterCalendar = ({
                     ),
                     children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-[18px]" }) })
                   }
-                )
+                ),
+                hasValue && clearButton && /* @__PURE__ */ jsx(Popover, { id: `filter-calendar-clear-${name}` })
               ] }) }),
               open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
                 const onClose = () => {
@@ -1858,7 +1887,7 @@ var FilterOptions = ({
         var _a, _b;
         let hasValue = isMulti ? ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 : !!((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.id);
         return /* @__PURE__ */ jsx(
-          Popover,
+          Popover$1,
           {
             className: clsx9(
               { ["w-full"]: isMobileSize },
@@ -2247,7 +2276,7 @@ var FilterSelect = ({
         var _a, _b;
         let hasValue = isMulti ? ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 : !!((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.id);
         return /* @__PURE__ */ jsx(
-          Popover,
+          Popover$1,
           {
             className: clsx9(
               { ["w-full"]: isMobileSize },
@@ -2288,6 +2317,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();
@@ -2303,7 +2335,8 @@ var FilterSelect = ({
                       ),
                       children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-[18px]" }) })
                     }
-                  )
+                  ),
+                  hasValue && clearButton && /* @__PURE__ */ jsx(Popover, { id: `filter-select-clear-${name}` })
                 ] }) }),
                 open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(
                   PopoverPanel,
@@ -3163,26 +3196,6 @@ var ModalDialog = ({
     )
   ] });
 };
-var Popover4 = ({
-  id,
-  displayArrow = true,
-  openOnClick = false
-}) => {
-  const style = {
-    noArrow: "hidden"
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    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 = {
@@ -3249,7 +3262,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)",
@@ -3670,7 +3685,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)",
@@ -5074,7 +5091,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsx(Popover4, { id: "copy-id" }),
+              /* @__PURE__ */ jsx(Popover, { id: "copy-id" }),
               /* @__PURE__ */ jsx("div", { className: "text-neutral-400 text-xs", children })
             ]
           }
@@ -5086,7 +5103,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsx(Popover4, { id: "icon-id" }),
+              /* @__PURE__ */ jsx(Popover, { id: "icon-id" }),
               /* @__PURE__ */ jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
             ]
           }
@@ -6046,7 +6063,7 @@ function InfoIcon({
       "data-tooltip-html": content,
       "data-tooltip-place": "top",
       children: [
-        /* @__PURE__ */ jsx(Popover4, { id }),
+        /* @__PURE__ */ jsx(Popover, { id }),
         /* @__PURE__ */ jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
       ]
     }
@@ -7534,6 +7551,6 @@ function ControlledInput({
 }
 ControlledInput.displayName = "ControlledInput";
 
-export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, ControlledInput, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, EditableTextSelect, FileUpload, FilterCalendar, FilterOptions, FilterSelect, InfoIcon, Input, InputMoney, InputNumber, InputPercentage, InputTag, Item, Logo, MaskedInput, Menu, ModalDialog, MultiSelect, MultiSelectBottom, PageBox, PageHeader, PaginationSelect, Popover4 as Popover, ProgressBar, Radio, RocketIcon, SelectField, SelectFieldBip, SimpleTab, SkeletonDetails, SkeletonList, SkeletonRegister, SpinnerIcon, StatusBall, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, Timeline, Toggle, ValueContainer4 as ValueContainer, sizes2 as sizes, translateVariant };
+export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, ControlledInput, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, EditableTextSelect, FileUpload, FilterCalendar, FilterOptions, FilterSelect, InfoIcon, Input, InputMoney, InputNumber, InputPercentage, InputTag, Item, Logo, MaskedInput, Menu, ModalDialog, MultiSelect, MultiSelectBottom, PageBox, PageHeader, PaginationSelect, Popover, ProgressBar, Radio, RocketIcon, SelectField, SelectFieldBip, SimpleTab, SkeletonDetails, SkeletonList, SkeletonRegister, SpinnerIcon, StatusBall, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, Timeline, Toggle, ValueContainer4 as ValueContainer, sizes2 as sizes, translateVariant };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map