nexaas-ui-components 1.0.83 → 1.0.85

package/dist/index.cjs

@@ -573,7 +573,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]",
@@ -1572,7 +1574,7 @@ var FilterCalendar = ({
                     as: "button",
                     className: clsx9__default.default(
                       "group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
-                      hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : `bg-surface border-[0.5px] border-stroke ${labelClassName != null ? labelClassName : "text-paragraph"} shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500`
+                      hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] group-hover:bg-blue-500 group-hover:border-transparent group-hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : `bg-surface border-[0.5px] border-stroke ${labelClassName != null ? labelClassName : "text-paragraph"} shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500`
                     ),
                     children: [
                       icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
@@ -2295,7 +2297,7 @@ var FilterSelect = ({
                       as: "button",
                       className: clsx9__default.default(
                         "group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
-                        hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : "bg-surface border-[0.5px] border-stroke text-paragraph shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500"
+                        hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] group-hover:bg-blue-500 group-hover:border-transparent group-hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : "bg-surface border-[0.5px] border-stroke text-paragraph shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500"
                       ),
                       children: [
                         icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
@@ -3281,7 +3283,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 +3706,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)",